12

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)

broofa
  • 37,461
  • 11
  • 73
  • 73
  • 1
    You used to be able to tell if IE console was open by whether `window.console` existed. – Paul Draper Dec 10 '13 at 23:49
  • 1
    @epascarello - I refuse to believe that. For example, at a minimum you could compare the window height to the viewport height and draw some conclusions from that. Not ideal, but certainly not impossible. – broofa Dec 10 '13 at 23:49
  • 1
    Yeah, is that the console or is that my RSS reader? What about when it is NOT docked to the window? No more height check! – epascarello Dec 10 '13 at 23:49
  • 1
    I think it would be a pretty severe security issue if this were possible. – Pointy Dec 10 '13 at 23:52
  • 2
    Talk about chrome here: http://stackoverflow.com/questions/7798748/find-out-whether-chrome-console-is-open – epascarello Dec 10 '13 at 23:52
  • @epascarello - Agreed, it's not ideal, but it's a signal of sorts. And maybe there are other indicators that, combined, might be useful? – broofa Dec 10 '13 at 23:54
  • 1
    What problem are you trying to solve? – Pointy Dec 10 '13 at 23:55
  • @Pointy - I'd like to conditionally load / run code when the user opens the console. Also, can you elaborate on how this would pose security issues? – broofa Dec 10 '13 at 23:55
  • 1
    @broofa the developer console is a useful tool for inspecting what stuff is trying to do to the browser environment. I think it's important that user agents remain able to inspect the state of a page without any possibility of code in the page finding out about that activity. – Pointy Dec 10 '13 at 23:57
  • 1
    Also, *why* do you want to load and run code? *What is the goal?* – Pointy Dec 10 '13 at 23:57
  • There is no actual way of doing this. You can find code out there that can detect if the development tools are opening/closing but that's done based on arbitrary computations (with viewports) and don't always work (if you have your console exist in its own window). There's no way to determine this 100% of the time. – deadboy May 27 '15 at 14:33
  • https://github.com/sindresorhus/devtools-detect – Chemical Programmer Jan 28 '17 at 05:27

3 Answers3

4

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

Community
  • 1
  • 1
guysigner
  • 2,822
  • 1
  • 19
  • 23
0

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/

cakidnyc
  • 379
  • 1
  • 4
  • 13
  • Can you explain why this is not possible in JavaScript? – Kmeixner Jun 08 '15 at 18:10
  • I changed my answer a little to give more details. There is a similar thread here about browser bookmarklets: http://stackoverflow.com/questions/6902695/can-i-detect-whether-a-browsers-bookmarks-toolbar-is-enabled-with-javascript – cakidnyc Jun 08 '15 at 19:04
-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

Tychio
  • 591
  • 1
  • 7
  • 20