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

Question

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

javascriptgoogle-chromewebkitfirebugweb-inspector

12

如何最好地确定用户是否已经打开浏览器控制台（即Firebug，Webkit Inspector，Opera Dragonfly）？

（即我不仅仅是想检测脚本中console对象的存在。我想知道用户何时实际上打开了调试器面板。理想情况下跨主要浏览器（IE / Safari / Chrome / Firefox ...甚至移动浏览器如果可能）

- broofa

1

以前你可以通过 window.console 是否存在来判断 IE 控制台是否打开。 - Paul Draper

1

@epascarello - 我不相信这个。例如，至少你可以将窗口高度与视口高度进行比较，并从中得出一些结论。虽然不是理想的方法，但绝对不是不可能的。 - broofa

1

是控制台还是我的RSS阅读器？如果它没有停靠在窗口上呢？不再需要高度检查！ - epascarello

1

我认为如果这是可能的话，那将是一个相当严重的安全问题。 - Pointy

2

在这里讨论Chrome：https://dev59.com/questions/nmsz5IYBdhLWcg3wlY0n - epascarello

显示剩余7条评论

3个回答

0

出于安全原因，JavaScript 不直接支持此功能。如果您需要跨浏览器支持，则需要创建浏览器插件，但这显然不是可行的解决方案。

不过，有一个聪明的解决方案是，有人想出了一个针对 Chrome 的解决方案，尽管我可以想象这只是一个长期的解决方案，因为它依赖于当控制台开启时代码运行速度变慢的事实：
http://blog.guya.net/2014/06/20/how-to-know-when-chrome-console-is-open/

- cakidnyc

你能解释一下为什么 JavaScript 中不可能实现这个吗？ - Kmeixner

我稍微修改了我的答案以提供更多细节。这里有一个关于浏览器书签工具栏的类似主题：https://dev59.com/lFnUa4cB1Zd3GeqPeNFR - cakidnyc

-3

不必检查检查器是否打开。

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

如果您的检查器在右侧，则document.body.clientWidth将更改。
如果您的检查器在底部，则document.body.clientHeight将更改。
如果您的检查器在其他窗口中，则什么也不会发生。

因此，您应该检查浏览器的宽度。

如果您想要在检查器中执行某些操作，请检查浏览器文档以获取devTools：

Chrome Firefox

- Tychio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- guysigner · Accepted Answer

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

顺便说一下：如果您的应用程序用户对控制台使用感兴趣，他们可能熟悉开发工具，并且不会对其出现感到惊讶。

简而言之，该语句作为断点起作用，仅当浏览器的开发工具打开时才会影响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>

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

。