检测开发工具是否被打开和无限debugger的设置与破解

前言

诸如4399小游戏这类网站，为了防止被别人扒代码，一般都会设置检测用户是否打开开发者工具（F12），并且如果是打开的那么会无限弹出debugger，让用户无法通过开发者工具调试代码。
弹出无限debugger的原理也很简单，就是设置一个定时器，或者使用递归无限调用debugger。

无限debugger

(function(){
    setInterval(function(){
        (function() {}['constructor']('debugger')())
    }, 100)
})()
// 或
(function(){
   function debug(){
        (function() {}['constructor']('debugger')());
        debug()
    }
    debug()
})()

两个函数都放在匿名函数内是防止有人将函数设置为空（防君子🐶）

破解无限debugger

破解方法也很简单，直接在开发工具中设置跳过断点即可

如果你想在自己写的chrome插件中在页面加载前将debugger清除掉，可以设置以下两段代码来清除

(function(){}).constructor === Function
Function.prototype.constructor = function(){}

检测用户是否打开了开发工具

检测方法有很多，诸如监听快捷键，比较窗口与可视窗口大小等，但是这类都很容易破解。
比较好的方法是，可以记录debugger前后时间，然后计算时间差，如果前后时间差过长（大于2s），那就基本可以认定是有人点了断点继续按钮了，如果是小于2s，也可能是人为点击的，这时候就需要进一步判断，设置一个计数器，如果小于2s的次数过多，那么也可以判断这就是人为点击的。
具体代码如下(此段摘录于4399小游戏)

function consoleOpenCallback() {
    alert('关闭调试窗');
    window.location.reload();
}

var Anti_numtots = 0;
(function () {
    window._windon_handler = setInterval( function() {
        var before = new Date();
        debugger;
        var after = new Date();
        if (after.getTime() - before.getTime() > 100) {
            if (after.getTime() - before.getTime() > 2000) {
                consoleOpenCallback();
                clearInterval(_windon_handler);
            }else{
                Anti_numtots++;
                if(Anti_numtots>=2){
                    consoleOpenCallback();
                    clearInterval(_windon_handler);
                }
            }
        }else{
            Anti_numtots = 0;
        }
    }, 1000)
})();