Menu
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)
574
Mozilla Firefox has two ways to open its inspection tool, called Inspector: Right-click an element on the web page, then select Inspect Element. From the Firefox menu bar, select Tools > Web Developer > Inspector .
Now, let’s see step by step how you can use the inspector in developer tool of your browser to get these locators. First, Navigate to the web page to be tested and launch the developer tool. Now, you can see the Dev Tools at the bottom of your page. Click the Inspector icon on Dev tools.
Right-click any item or space on a web page, then select Inspect Element. Go to the Develop menu, then select Show Web Inspector. If you don't see the Develop menu, go to the Safari menu, and select Preferences.
There is no universal way to tell if the console is open in any browser. You'll have to detect each browser separately, and it's likely that it's impossible in most (or all) of them. – JJJ Oct 20 '16 at 11:32
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
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
