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

Posted 2023-03-06

技术标签:

【中文标题】检测是不是在所有浏览器中都打开了控制台/开发工具【英文标题】：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 需要它？ ***.com/questions/7798748/… demo: jsfiddle.net/evnrorea/embedded/result 即使控制台已停靠，它也能正常工作如果您使用它来防止人们看到您的源代码或增加安全性，那么您可以停止。浏览器控制台实际上只是一个程式化的源代码查看器。如果有人想查看您网站的源代码，您无能为力。添加这些烦人的检查也不会阻止这种情况。控制台也可以注入 JavaScript，但同样，也有其他方法可以在没有控制台的情况下执行此操作。如果您想提醒用户注意自我 xss，那么您可以简单地做 facebook 所做的事情。有一个 console.log 来警告用户，like this。 【参考方案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://***.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

【讨论】：

以上是关于检测是不是在所有浏览器中都打开了控制台/开发工具的主要内容，如果未能解决你的问题，请参考以下文章

IE 检查你的浏览器是不是被某种（游戏或其它）安装程序恶意附加了某种插件怎么办？

为啥有时候我点个网页，浏览器会自己一直重复打开那个网页？

openwrt网络检测开吗

Unity选项界面打不开

电脑网页打不开提示隐私设置错误，您的连接不是私密连接

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

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

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