检测console/devtools是否在所有浏览器中打开

Detect if console/devtools is open in all browsers

本文关键字：浏览器 console devtools 是否 检测      更新时间：2023-09-26

我试图创建一个脚本，将运行时，任何浏览器控制台打开或关闭。是否有任何方法可以检测所有浏览器(Firefox/IE/Chrome/Safari/Opera)中的浏览器控制台是否通过JavaScript, jQuery或任何其他客户端脚本打开?

如果你愿意为用户接受干扰，您可以使用调试器语句，因为它在所有主流浏览器中都可用。

旁注:如果你的应用的用户对主机使用感兴趣，他们可能熟悉开发工具，并且不会对它的出现感到惊讶。

简而言之，该语句充当了一个断点，并且只有当浏览器的开发工具在上时才会影响UI 。

下面是一个测试示例:

<body>
<p>Devtools is <span id='test'>off</span></p>
<script>
  var minimalUserResponseInMiliseconds = 100;
  var before = new Date().getTime();
  debugger;
  var after = new Date().getTime();
  if (after - before > minimalUserResponseInMiliseconds) { // user had to resume the script manually via opened dev tools 
    document.getElementById('test').innerHTML = 'on';
  }
</script>
</body>

devtools-detect应该做这项工作。试试简单的演示页面。

devtools-detect→检测DevTools是否打开及其方向

支持的浏览器:

  • DevTools in Chrome, Safari, Firefox &歌剧

事项:

  • 不工作，如果DevTools是未停靠(单独的窗口)，并可能显示一个假阳性，如果你切换任何类型的侧边栏。

出于安全原因，我认为在JS中不可能直接实现。但是在这里他们声称，当你想在DevTools打开时发生一些特别的事情时，这是可能的，也是有用的。比如暂停画布，添加样式调试信息等

但是正如@James Hill在这里所说的，我也认为即使浏览器选择让客户端访问这些信息，它也不会是一个标准的实现(跨多个浏览器支持)。也可以试试这个。

这在任何官方的跨浏览器方式中都是不可能的，但如果偶尔的误报是可以接受的，您可以检查window.onresize事件。用户在加载页面后调整窗口大小的情况并不常见。如果你期望用户经常打开控制台，这甚至会更有效，这意味着误报率会更低。

window.onresize = function(){
    if ((window.outerHeight - window.innerHeight) > 100) {
        // console was opened (or screen was resized)
    }
}

归功于https://stackoverflow.com/a/7809413/3774582。虽然这个问题是chrome特有的，但这个概念在这里适用。

进一步说明，如果您需要对误报的容忍度很低，大多数窗口大小调整将触发此事件数十次，因为它通常作为拖动操作完成，而打开控制台只会触发一次。如果你能检测到这一点，这种方法将变得更加准确。

注意:这将无法检测当用户访问页面时控制台是否已经打开，或者如果用户在新窗口中打开控制台。

(function() {
    'use strict';
    const el = new Image();
    let consoleIsOpen = false;
    let consoleOpened = false;
    Object.defineProperty(el, 'id', {
        get: () => {
            consoleIsOpen = true;
        }
    });
    const verify = () => {
        console.dir(el);
        if (consoleIsOpen === false && consoleOpened === true) {
            // console closed
            window.dispatchEvent(new Event('devtools-opened'));
            consoleOpened = false;
        } else if (consoleIsOpen === true && consoleOpened === false) {
            // console opened
            window.dispatchEvent(new Event('devtools-closed'));
            consoleOpened = true;
        }
        consoleIsOpen = false;
        setTimeout(verify, 1000);
    }
    verify();
})();
window.addEventListener('devtools-opened', ()=>{console.log('opened')});
window.addEventListener('devtools-closed', ()=>{console.log('closed')});

这个解决方案很有魅力

https://github.com/sindresorhus/devtools-detect

如果你不使用模块-禁用

行
//  if (typeof module !== 'undefined' && module.exports) {
//      module.exports = devtools;
//  } else {
        window.devtools = devtools;
//  }

and result is then here

window.devtools.isOpen

我在我的项目中使用了blur事件。

function yourFunction() {}
window.addEventListener('blur',(e)=>{e.preventDefault(); yourFunction()})

这将在窗口失去焦点时执行yourFunction。例如，当有人打开DevTools。似乎当你试图访问另一个窗口时，它也会触发…所以可能不是最好的解决方案。也许可以将其与查看浏览器的宽度配对。如果它改变了你可以很确定

相关文章：