如何检查是否打开了Chrome Dev工具？

Question

我在codeschool.com的教程中发现（discover-devtools: http://discover-devtools.codeschool.com/chapters/1/challenges/3）有可能检查Chrome开发人员工具是否打开。如何检查它的状态/获取事件（cmd+alt+i）被按下？

- static

---

请参考查找Chrome控制台是否已打开获取可行的解决方案。 - Sindre Sorhus

Answer 1

谷歌是你的好朋友

function isInspectOpen()
{
    console.profile(); 
    console.profileEnd(); 
    if (console.clear) console.clear();
    return console.profiles.length > 0;
}

从这个问题中得知：

如果用户打开了开发者工具，此函数将返回true。

编辑

回应您的评论：

$('#header').click(alert(isInspectOpen()))

jQUery的格式不正确，请尝试：

$('#header').click(function(){
   alert(isInspectOpen());
});

- Scott Selby

---

嗯，调用 isInspectOpen() 函数没问题 :) （即它返回 true）。但是如果我设置 setTimeout('alert(isInspectOpen())', 10000) 并关闭 DevTools，10 秒后仍然会弹出 true。有什么想法吗？还有其他测试该函数的方法吗？ - static

不要使用超时来测试这个，尝试使用工具打开进行测试，然后再关闭它。 - Scott Selby

有没有什么办法可以在 DevTools 关闭的情况下调用 alert(isInspectOpen())（或其他通知方式，例如更改某些 div 的文本）？$('#header').click(alert(isInspectOpen())) 对我也不起作用。 - static

请注意，我们已从 Blink 中删除了危险的 console.profiles：https://src.chromium.org/viewvc/blink?revision=151136&view=revision，因此该技巧在 Chromium 上将无法使用。 - Yury Semikhatsky

Answer 2

你可以尝试使用像log4js或类似的日志框架。 http://log4js.berlios.de/links.html#other 这样你的代码就不会过于依赖特定的浏览器了。

- glenwaykid

---

记录某事。我需要找出这个东西是如何工作的（在浏览器中显示它的工作方式，例如它触发了哪个事件/改变了哪个状态），以及如何做到这一点，这是一个问题 ;) 当然，log4js是一个很好的工具来显示事件已经发生。 - static