How to detect if browser console / inspector is *o

2019-04-22 17:27发布

问题:

What's the best way to determine if the user has the browser console (i.e. firebug, webkit inspector, Opera dragonfly) open?

(I.e. I'm not interested in merely detecting the presence of the console object in script. I want to know when the user has actually opened the debugger panel. Ideally across the major browsers (IE/Safari/Chrome/Firefox... and even mobile browsers if possible)

回答1:

If you are willing to accept an interference for the user, you could use the debugger statement, as it is available in all major browsers.

Side note: If the users of your app are interested in console usage, they're probably familiar with dev tools, and will not be surprised by it showing up.

In short, the statement is acting as a breakpoint, and will affect the UI only if the browser's development tools is on.

Here's an example test:

<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>

DISCLAIMER: I initially published this exact answer for this possibly duplicate question



回答2:

It's not directly possible in Javascript for security reasons. You would need to create a browser plugin, which obviously is not a feasible solution if you want cross-browser support.

However, there is this tricky solution that this guy came up with for Chrome, although I can imagine that this is a long-term solution because it relies on the fact that code runs slower when the console is up: http://blog.guya.net/2014/06/20/how-to-know-when-chrome-console-is-open/



回答3:

It's unnecessary to check if inspector is open.

When you open the inspector, there are some case might be happened:

  1. document.body.clientWidth will be changed if your inspector is right.
  2. document.body.clientHeight will be changed if your inspector is bottom.
  3. nothing if your inspector is in other window.

Therefore, you should check width of your browser.

And if you want to do something in inspector, please check browser document for devTools:

Chrome Firefox