Detect all browser console open or not

I'm trying to create a script which will run when any browser console open and close. so is there any way to detect all browser console (firefox/ie/chrome/safari) open or not via javascript, jquery or any other client side script?


ANSWERS:


In chrome you can detect via following script:

status: <div id="devtool-status"></div> 


var checkStatus;

var element = new Image();
// var element = document.createElement('any');
element.__defineGetter__('id', function() {
    checkStatus = 'on';
});

setInterval(function() {
    checkStatus = 'off';
    console.log(element);
    console.clear();
    document.querySelector('#devtool-status').innerHTML = checkStatus;
}, 1000)

Or (this function will return true is the user has the developer tools open)

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

window.onresize = function() {
    isInspectOpen()
}

Or you can use another Tricky way

chrome.tabs.query({url:'chrome-devtools://*/*'}, function(tabs){
    if (tabs.length > 0){
        //devtools is open
    }
}); 

For Firefox you can track it via console.firebug

if( window.console && (console.firebug || console.table && /firebug/i.test(console.table()))) {
    alert('Firebug is running');
} else {
    alert('Firebug is not found');
}   

For other then Chrome & Firefox it can detect whether console tab docked or undocked

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

I don't think it is directly possible in JS for security reasons.But in here they are claiming that it is possible and is useful for when you want something special to happen when DevTools is open. Like pausing canvas, adding style debug info, etc.

But As @James Hill tell in this, I also thinks even if a browser chose to make this information accessible to the client, it would not be a standard implementation (supported across multiple browsers). Also can also try this one also here.


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>

It's not possible in any official cross browser way, but if the occasional false positive is acceptable, you can check for a window.onresize event. Users resizing their windows after loading a page is somewhat uncommon. It's even more effective if you expect users will be frequently opening the console, meaning less false positives as a percentage. This will fail to detect if the console is already open when the user visits the page, or if the user opens the console in a new window.

window.onresize = function(){
    if ((window.outerHeight - window.innerHeight) > 100) {
        // console was opened (or screen was resized)
    }
}

Credit to . Although that question is chrome specific, the concept applies here.

To expand on this, if you need a very low tolerance on false positives, most window resizes will trigger this event dozens of times because it is usually done as a drag action, while opening the console will only trigger this once. If you can detect this, the approach will become even more accurate.



 MORE:


 ? Execute JS code only in debug mode
 ? How to stop from data post from browser console?
 ? How to detect if browser inspector window is open?
 ? Is it possible in JS to detect whether any JS was run from the browser's console?
 ? What is the equivalent to Firebug DOM tab in Chrome Dev tools?
 ? Result of 4.08-1.36 in console
 ? PHP - How to get Network Contents That appears in Chrome using file_get_contents with PHP
 ? How to get formatted console message in Google Chrome's developer tools?
 ? Chrome remote debugging on Arch Linux: Android device not detected
 ? How should I parallelize the execution of 2 or more json calls?