如何检测浏览器控制台/检查器是否已打开

How to detect if browser console / inspector is *open*?

本文关键字：检查 是否 控制台 何检测 检测 浏览器      更新时间：2024-07-04

确定用户是否拥有浏览器控制台（即firebug、webkit检查员，歌剧蜻蜓）打开？

（也就是说，我对仅仅检测脚本中console对象的存在不感兴趣。我想知道用户什么时候真正打开了调试器面板。理想情况下，在主要浏览器（IE/Safari/Chrome/Firefox…，如果可能的话，甚至是移动浏览器）中，

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

附带说明：如果你的应用程序的用户对控制台的使用感兴趣，他们可能熟悉开发工具，并且不会对它的出现感到惊讶。

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

免责声明：我最初发布了这个可能重复的问题的确切答案

由于安全原因，这在Javascript中是不可能的。你需要创建一个浏览器插件，如果你想要跨浏览器支持，这显然不是一个可行的解决方案。

然而，这个家伙为Chrome想出了一个棘手的解决方案，尽管我可以想象这是一个长期的解决方案。因为它依赖于控制台启动时代码运行速度较慢的事实：http://blog.guya.net/2014/06/20/how-to-know-when-chrome-console-is-open/

没有必要检查检查器是否打开。

当你打开检查员时，可能会发生一些情况：

  1. 如果检查员正确，document.body.clientWidth将被更改
  2. 如果您的检查员在底部，document.body.clientHeight将被更改
  3. 如果你的检查员在另一个窗口，什么也不做

所以，您应该检查浏览器的宽度。

如果你想在检查器中做点什么，请查看浏览器文档中的devTools:

铬Firefox

相关文章：