CODEWITHSUNDEEP
javascriptjquerybrowsercross-browser
Super User
Super User

Reputation: 9642

Detect if console/devtools is open in all browsers

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?

Upvotes: 26

Views: 44896

Answers (7)

Pandora
Pandora

Reputation: 1

I for my project use the blur event.

function yourFunction() {}
window.addEventListener('blur',(e)=>{e.preventDefault(); yourFunction()})

This will execute yourFunction when the window loses focus. For instance when someone opens the DevTools. Okay seems like it also fires when you try to access a different window... so maybe not the best solution. Maybe pair it with looking at the width of the browser. If it chainged you can be pretty sure about it I think

Upvotes: -4

ashleedawg
ashleedawg

Reputation: 21619

devtools-detect should do the job. Try the simple demo page.

devtools-detect → detect whether DevTools is open, and its orientation.

Supported Browsers:

  • DevTools in Chrome, Safari, Firefox & Opera

Caveats:

  • Doesn't work if DevTools is undocked (separate window), and may show a false positive if you toggle any kind of sidebar.

Upvotes: 14

Bruno
Bruno

Reputation: 7191

This solution works like a charm

https://github.com/sindresorhus/devtools-detect

if you are not using modules - disable lines

//  if (typeof module !== 'undefined' && module.exports) {
//      module.exports = devtools;
//  } else {
        window.devtools = devtools;
//  }

and result is then here

window.devtools.isOpen

Upvotes: -1

cesium133
cesium133

Reputation: 67

(function() {
    'use strict';
    const el = new Image();
    let consoleIsOpen = false;
    let consoleOpened = false;

    Object.defineProperty(el, 'id', {
        get: () => {
            consoleIsOpen = true;
        }
    });

    const verify = () => {
        console.dir(el);
        if (consoleIsOpen === false && consoleOpened === true) {
            // console closed
            window.dispatchEvent(new Event('devtools-opened'));
            consoleOpened = false;
        } else if (consoleIsOpen === true && consoleOpened === false) {
            // console opened
            window.dispatchEvent(new Event('devtools-closed'));
            consoleOpened = true;
        }
        consoleIsOpen = false;
        setTimeout(verify, 1000);

    }

    verify();
})();
window.addEventListener('devtools-opened', ()=>{console.log('opened')});
window.addEventListener('devtools-closed', ()=>{console.log('closed')});

Here is a code that worked for me.

Upvotes: 1

Goose
Goose

Reputation: 4821

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.

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

Credit to https://stackoverflow.com/a/7809413/3774582. 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.

Note: 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.

Upvotes: 2

guysigner
guysigner

Reputation: 2922

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>

Upvotes: 16

S M
S M

Reputation: 3233

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.

Upvotes: 4

Related Questions