怎么样禁止恶意调试控制台

防止恶意调试控制台

身为前端人员，查看控制台已经是一个日常操作，项目除了什么问题第一反应就是打开控制台一探究竟。

直到昨天，负责手头项目的产品突然跟我说使用使用遮罩层遮住部分页面上面的假数据方案不通过，他会用检查元素来吧遮罩层隐藏来看里层的数据（里层也是假数据），并表示这样的假数据会误导用户以为时真数据… 现在的用户都这么厉害了吗——也不知道是不是在抖音上面学的

• 维护开发人员的“尊严”，防止恶意调试控制台势在必行

说维护尊严可能有点过头了，言归正转。

• debugger

1. 防止调试，第一想到就就是 debugger ，打开控制台就指定断点。
2. 但是，高级一点的用户（或者说时同行）可以将控制台断点跳过
3. 所以简单一行debugger是不能达到我想要的目的

于是，有了下面的简单实现方法

上代码：

(() => {
    function block() {
        setInterval(() => {
            Function("debugger")();
        }, 50);
    }
    try {
        block();
    } catch (err) {}
})();

代码里面的妙处简单有3点： 定时执行防止跳过 ， 使用 Function 对象的函数来执行断点 ， 使用自执行函数并用 try...catch 包裹

上面的方法确实可以比较有效控制恶意调试，但是不太友好。容易惹恼 调试者。

所以使用下面这个方法给他一个 温馨提示 ：

(() => {
    function block() {
        if (
            window.outerHeight - window.innerHeight > 200 ||
            window.outerWidth - window.innerWidth > 200
        ) {
            document.body.innerHTML =
                "不要乱翻别人的东西哦";
        }
        setInterval(() => {
            (function () {
                return false;
            }
                ["constructor"]("debugger")
                ["call"]());
        }, 50);
    }
    try {
        block();
    } catch (err) {}
})();

上面主要用到 window 对象的一些自带属性，到打开控制台且控制台宽度或者高度超过200像素点的时候，页面内容就会被替换。

但是如果是悬浮控制台呢，那就放你一马吧，看来是同行，你看看吧，有问题烦请指教

---

以上内容为个人学习积累总结，如有疑问烦请指出 ^_