`devtools-detect`

Question

我正在尝试创建一个在打开或关闭任何浏览器控制台时运行的脚本。有没有办法检测所有浏览器（Firefox / IE / Chrome / Safari / Opera）中的浏览器控制台是否通过JavaScript，jQuery或任何其他客户端脚本打开？

Answer 1

如果您愿意接受对用户的干扰，您可以使用the debugger statement，因为它可以在所有主要浏览器中使用。

附注：如果您的应用的用户对控制台使用感兴趣，他们可能熟悉开发工具，并且不会因为它出现而感到惊讶。

简而言之，该声明充当断点，只有在浏览器的开发工具处于时才会影响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>

Answer 2

在任何官方的跨浏览器方式都无法实现，但如果偶尔会出现误报，则可以检查window.onresize事件。用户在加载页面后调整窗口大小有点不常见。如果您希望用户经常打开控制台，这意味着更有效，这意味着百分比误报率更低。当用户访问页面时，或者用户在新窗口中打开控制台时，这将无法检测控制台是否已打开。

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

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

为了扩展这一点，如果你需要对误报的容忍度非常低，大多数窗口调整大小都会触发此事件数十次，因为它通常是作为拖动动作完成的，而打开控制台只会触发一次。如果您能够发现这种情况，那么这种方法将变得更加准确。

Answer 3

出于安全考虑，我不认为JS是直接可行的。但是here 他们声称，当DevTools处于打开状态时，如果你想要一些特别的东西，它是可能的并且是有用的。像暂停画布，添加样式调试信息等

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

Answer 4

我没有深入尝试devtools-detect，但是demo看起来很有希望...

devtools-detect

→ 检测DevTools是否打开及其方向。


支持的浏览器：


Chrome开发工具

Safari开发工具

Firefox DevTools

Opera DevTools



注意事项：


如果未打开DevTools则不起作用，并且如果切换任何类型的侧边栏，则会显示误报。

尝试简单的demo page。

Answer 5

(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')});

这是一个对我有用的 code。

Answer 6

这个解决方案很有魅力

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

如果您不使用模块 - 禁用行

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

结果就在这里

window.devtools.isOpen

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

6 个答案:

`devtools-detect`