在网页上检测浏览器是否打开了调试工具

今天在stackoverflow上看到一个很有趣的问题 “Find out whether Chrome console is open”

其中有个解决方案非常好玩

看了答主写的文章“How to know when Chrome console is open”

When you run console commands it runs slower when the console is opened. That’s it. You simply run console.log and console.clear a few times and if it’s slower – than the console is open.

我的理解是根据打开调试工具与未打开之间的时间差来判断调试工具是否被打开

明白大致的原理之后自己动手试了一下,整个代码逻辑其实存在一个明显的bug:

在已经打开了调试工具的情况下再打开网页,是会被误检成未打开。这时只能通过关闭再打开调试工具才能被正确的检测出当前状态

原因:需要一个标准时间片段来与之后的运行时间片段做差值计算,打开了调试工具再打开网页会造成标准时间片段在刚开始时就是错误的,只有关闭再打开调试工具,纠正这个错误值之后,才能正确的显示状态。

源码:

var standard;
var info;
window.addEventListener('load',function(argument) {
    info = document.getElementById('info');
    standard = testTimes();
    setTimeout(main,1000);
});



function main() {
    var now = testTimes();
    standard = Math.min(now,standard);//起到纠正作用
    info.textContent = standard*2<now?"工具被打开":"没有打开";
    setTimeout(main,1000);
}



function testTimes() {
    var begin = new Date();
    for(var i=0;i<550;i++){
        console.log('open');
        console.clear();
    }
    var end = new Date();
    return end.getTime()-begin.getTime();
}