查看 Chrome 控制台是否打开

问题描述

我正在使用这个小脚本来确定 Firebug 是否打开:

I am using this little script to find out whether Firebug is open:

if (window.console && window.console.firebug) {
    //is open
};

而且效果很好.现在找了半个小时想办法检测谷歌浏览器内置的web开发者控制台是否打开，但是没有找到任何提示.

And it works well. Now I was searching for half an hour to find a way to detect whether Google Chrome's built-in web developer console is open, but I couldn't find any hint.

这个:

if (window.console && window.console.chrome) {
    //is open
};

不起作用.

所以好像无法检测Chrome控制台是否打开.但是有一个hack"有效，但有一些缺点:

So it seems that it is not possible to detect whether the Chrome console is open. But there is a "hack" that works, with some drawbacks:

• 当控制台断开连接时将无法工作
• 在页面加载时打开控制台时将无法工作

所以，我现在要选择 Unsigned 的答案，但如果有人提出了一个绝妙的主意，欢迎他仍然回答，我会更改所选答案！谢谢！

So, I am gonna choose Unsigned´s answer for now, but if some1 comes up with a brilliant idea, he is welcome to still answer and I change the selected answer! Thanks!

推荐答案

requestAnimationFrame (Late 2019)

将这些先前的答案留在这里以了解历史背景.目前Muhammad Umer 的方法适用于 Chrome 78，具有检测关闭和打开事件的额外优势.

requestAnimationFrame (Late 2019)

Leaving these previous answers here for historical context. Currently Muhammad Umer's approach works on Chrome 78, with the added advantage of detecting both close and open events.

感谢 Overcl9ck 对此答案的评论.用空函数对象替换正则表达式 /./ 仍然有效.

Credit to Overcl9ck's comment on this answer. Replacing the regex /./ with an empty function object still works.

var devtools = function() {};
devtools.toString = function() {
  if (!this.opened) {
    alert("Opened");
  }
  this.opened = true;
}

console.log('%c', devtools);
// devtools.opened will become true if/when the console is opened

由于最初的提问者似乎不再存在并且这仍然是公认的答案，因此添加此解决方案以提高可见性.归功于 Antonin Hildebrand 的 评论 zswang的href="https://stackoverflow.com/a/30638226/629493">答案.此解决方案利用了这样一个事实:除非控制台打开，否则不会对记录的对象调用 toString().

Since the original asker doesn't seem to be around anymore and this is still the accepted answer, adding this solution for visibility. Credit goes to Antonin Hildebrand's comment on zswang's answer. This solution takes advantage of the fact that toString() is not called on logged objects unless the console is open.

var devtools = /./;
devtools.toString = function() {
  if (!this.opened) {
    alert("Opened");
  }
  this.opened = true;
}

console.log('%c', devtools);
// devtools.opened will become true if/when the console is opened

更新:console.profiles 已从 Chrome 中删除.此解决方案不再有效.

Update: console.profiles has been removed from Chrome. This solution no longer works.

感谢 Paul Irish 从 发现 DevTools，使用分析器:

Thanks to Paul Irish for pointing out this solution from Discover DevTools, using the profiler:

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

<button onClick="showIfInspectIsOpen()">Is it open?</button>

这个其他选项可以检测在页面加载后打开的停靠检查器，但无法检测到未停靠检查器，或者检查器是否在页面加载时已经打开.还有一些潜在的误报.

window.onresize = function() {
  if ((window.outerHeight - window.innerHeight) > 100) {
    alert('Docked inspector was opened');
  }
}