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

Posted

技术标签:

【中文标题】检测是不是在所有浏览器中都打开了控制台/开发工具【英文标题】: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:&gt;&gt;,直到用户单击它。只有这样,事件才会触发。【参考方案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选项界面打不开

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

是否在所有设备中都通过点击事件检测到触摸设备中的触摸?