Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect if console/devtools is open in all browsers

Tags:

I'm trying to create a script which will run when any browser console is opened or closed. Is there any way to detect if the browser console in all browsers (Firefox/IE/Chrome/Safari/Opera) is open or not via JavaScript, jQuery, or any other client-side script?

like image 493
Super User Avatar asked Oct 20 '16 11:10

Super User


People also ask

How do I know if Developer Tools are open?

In Chrome, pressing the F12 key or Ctrl + Shift + I (or Command + option + I on a Mac) also brings up the interactive developer tools.


1 Answers

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>
like image 62
guysigner Avatar answered Sep 21 '22 07:09

guysigner