检测是否在所有浏览器中都打开了控制台/开发工具答案

【问题标题】：Detect if console/devtools is open in all browsers检测是否在所有浏览器中都打开了控制台/开发工具
【发布时间】：2017-03-02 09:09:18
【问题描述】：

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

【问题讨论】：

没有通用的方法来判断控制台是否在任何浏览器中打开。您必须分别检测每个浏览器，而且在大多数（或全部）浏览器中很可能是不可能的。
在某些版本的 IE 中，控制台在打开之前不会被初始化。可以用的
@mymotherland 但控制台可以取消停靠，因此一次又一次地得到相同的答案：“您无法检测控制台是否以任何可靠的方式打开/关闭”。问题可能是：为什么 OP 需要它？
stackoverflow.com/questions/7798748/… demo: jsfiddle.net/evnrorea/embedded/result 即使控制台已停靠，它也能正常工作
如果您使用它来防止人们看到您的源代码或增加安全性，那么您可以停止。浏览器控制台实际上只是一个程式化的源代码查看器。如果有人想查看您网站的源代码，您无能为力。添加这些烦人的检查也不会阻止这种情况。控制台也可以注入 JavaScript，但同样，也有其他方法可以在没有控制台的情况下执行此操作。如果您想提醒用户注意自我 xss，那么您可以简单地做 facebook 所做的事情。有一个 console.log 来警告用户，like this。

标签： javascript jquery browser cross-browser

【解决方案1】：

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

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

【讨论】：

如果检查器在页面加载时已经打开，那么您的第一个解决方案就失败了！ 2. 根据James Hill 是不可能的。 3. 如果我们取消停靠开发工具（在单独的窗口中打开开发工具），它将无法工作。感谢您的支持
检测是否使用了内置浏览器功能可能会产生哪些“安全问题”？
我可以想象暴露开发控制台的状态可以允许更好的指纹识别。并且网站还可以引导不精通的用户使用热键打开控制台，然后显示反馈，总体上提示他们做一些恶意的事情

【解决方案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。虽然这个问题是特定于 chrome 的，但这个概念在这里也适用。

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

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

【讨论】：

如果检查器在页面加载时已经打开，那么您的解决方案将失败！
@LukeStevenson 我的回答中提到了
@Goose 我知道，但你的警告被埋没在你的答案中，你用不同寻常的措辞——“在新窗口中打开控制台”。我添加了我的评论，所以很容易发现这个细节，因为我知道它不适合我。

【解决方案3】：

如果您愿意为用户接受干扰，您可以使用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>

【讨论】：

更多关于 debugger 的信息来自 mozilla 的文档。
有效。但看起来你不能使用这种行为来设置一个变量来指示 DevTools 是否打开 - 只有当它们打开时你才能触发断点。
好像只有第一次进入网页打开控制台才有效。
不错的概念，是否可以在运行时通过 js 到各个地方创建调试器语句，从而更难以破解我的 js 页面。

【解决方案4】：

devtools-detect 应该可以完成这项工作。试试简单的demo 页面。

devtools-detect → ^{_{检测 DevTools 是否打开，及其方向。}}

支持的浏览器：

Chrome、Safari、Firefox 和 Opera 中的开发工具

注意事项：

如果 DevTools 未停靠（单独的窗口），则不起作用，并且如果您切换任何类型的侧边栏，则可能会显示误报。

【讨论】：

它会检查窗口大小，它工作正常，直到你从窗口中分离开发工具，然后它就不再工作了:)。
对我不起作用。但是，正如 Fabio 所说 - 我的 DevTools 已分离。
它没有检测到开发工具；它检测到窗口大小的突然变化，更恰当地命名为sudden-window-size-change-detect
如果您将页面放大到 110%，这个功能不起作用。

【解决方案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。

【讨论】：

这不再有效（我假设它在某些时候有效），因为调试器不会调用已定义的 getter。它只会在调试器中显示id:(...) 或id:>>，直到用户单击它。只有这样，事件才会触发。

【解决方案6】：

这个解决方案就像一个魅力

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

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

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

结果就在这里

window.devtools.isOpen

【讨论】：

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

`devtools-detect` → ^{_{检测 DevTools 是否打开，及其方向。}}