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

时间:2013-12-10 23:47:21

标签: javascript google-chrome webkit firebug web-inspector

确定用户是否拥有浏览器控制台(即firebug,webkit)的最佳方法是什么 检查员,Opera蜻蜓)打开

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

3 个答案:

答案 0 :(得分:1)

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

免责声明:我最初发布了this possibly duplicate question

的确切答案

答案 1 :(得分:0)

出于安全原因,它无法直接在Javascript中使用。您需要创建一个浏览器插件,如果您需要跨浏览器支持,这显然不是一个可行的解决方案。

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

答案 2 :(得分:-2)

无需检查检查员是否已打开。

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

    如果您的检查员是对的,
  1. document.body.clientWidth将被更改。
  2. 如果检查员在底部,则会更改document.body.clientHeight。
  3. 如果您的检查员在其他窗口,
  4. 没有任何内容。
  5. 因此,您应该检查浏览器的宽度。

    如果您想在检查员中执行某些操作,请查看devTools的浏览器文档:

    Chrome Firefox