【Javascript】前端开发中如何检测用户浏览器是否打开了调试面板

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

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

二、从输出时间来判断

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

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

    return endTime - startTime > 100;
};
isConsoleOpen();

三、通过设置对象的属性的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) + ' 次打开控制台';
  };
})();