前端开发中如何在JS文件中检测用户浏览器是否打开了调试面板

一、根据浏览器窗口大小变化

var widthThreshold = window.outerWidth - window.innerWidth > threshold;
var heightThreshold = window.outerHeight - window.innerHeight > threshold;
var orientation = widthThreshold ? "vertical" : "horizontal";

二、从输出时间来判断

function isConsoleOpen() {
    var startTime = new Date();
    debugger;
    var endTime = new Date();

    return endTime - startTime > 100;
}

如果控制台打开，debugger 这里会使其执行中断

三、使用浏览器输出对象时获取实时引用的方式
举个例子来说明 chrome 获取对象实时的例子吧。（控制台会保留 console 的内容）

我们在利用控制台查看对象，点击后展开的对象属性是实时的。假如对象在输出后又有改动，最好使用 JSON.stringify 去输出 。

四、通过设置对象的属性的 getter 方法
原理：当控制台在输出的某个对象时，是会去 get 对象属性的，因此会调用到属性的 getter。

var checkStatus;

var element = new Image();
// var element = document.createElement('any');
element.__defineGetter__("id", function () {
    checkStatus = "on";
});

setInterval(function () {
    checkStatus = "off";
    console.log(element);
    console.clear();
    document.querySelector("#devtool-status").innerHTML = checkStatus;
}, 1000);

五、奇淫巧技

(function () {
    var re = /x/;
    var i = 0;
    console.log(re);

    re.toString = function () {
        return "第 " + ++i + " 次打开控制台";
    };
})();

实例：

(function () {
    var callbacks = [],
        timeLimit = 50,
        open = false;
    setInterval(loop, 1);
    return {
        addListener: function (fn) {
            callbacks.push(fn);
        },
        cancleListenr: function (fn) {
            callbacks = callbacks.filter(function (v) {
                return v !== fn;
            });
        },
    };

    function loop() {
        var startTime = new Date();
        debugger;
        if (new Date() - startTime > timeLimit) {
            if (!open) {
                callbacks.forEach(function (fn) {
                    fn.call(null);
                });
            }
            open = true;
            window.stop();
            alert("请尊重一下劳动成果，不要偷代码哦！");
            document.body.innerHTML = "";
        } else {
            open = false;
        }
    }
})().addListener(function () {
    window.location.reload();
});