Detect if console/devtools is open in all browsers

Question

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?

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
In some version of IE, console is not initialised until its open. That can be used — Rajesh, Oct 20 '16 at 11:33
Possible Duplicate: http://stackoverflow.com/questions/20507780/how-to-detect-if-browser-console-inspector-is-open — Rajesh, Oct 20 '16 at 11:37
Not really, depends on the browser itself. For example the same javascript used to do this in IE may not work in Chrome/Firefox/Safari — Master Yoda, Oct 20 '16 at 11:38
@Rajesh ahhh, console.log is undefined errors. Happy memories. — Drumbeg, Oct 20 '16 at 11:39
did u try this window.onresize = function(){ if ((window.outerHeight - window.innerHeight) > 100) alert('Docked inspector was opened'); } — mymotherland, Oct 20 '16 at 11:43
@mymotherland but console can be undocked and so comes same answer again and again: "you cannot detect if console is opened/closed in any reliable way". The question could be: why OP needs it? — A. Wolff, Oct 20 '16 at 11:45
i think that is not possible, you can try window.onresize it's the only way to do that. — Tarik FAMIL, Oct 20 '16 at 11:46
http://stackoverflow.com/questions/7798748/find-out-whether-chrome-console-is-open demo: https://jsfiddle.net/evnrorea/embedded/result/ it works fine even console is docked — mymotherland, Oct 20 '16 at 11:57
@mymotherland it's work only in chrome, i need it in all browser.. — Super User, Oct 24 '16 at 06:12
If you're using this to prevent people from seeing your source code, or add security, then you can just stop. The browser console is really just a stylized source code viewer. If someone wants to see your website's source code, there's nothing you can do about it. Adding these annoying checks won't prevent that either. The console can inject JavaScript too, but again, there's other ways of doing this without the console too. If you're trying to alert users of self-xss, then you can simply do what facebook does. Have a console.log to warn users, [like this](http://i.imgur.com/nATIA5Q.png). — Dave Chen, Jan 13 '17 at 05:17
well, you can tell the user to install a plugin to detect that. this is not via javascript/jquery. You just need to create the plugin for all kind of browser :) — Anthony C, Jan 13 '17 at 05:28
Duplicate of: http://stackoverflow.com/questions/20507780/how-to-detect-if-browser-console-inspector-is-open/43755340#43755340 — Cerbrus, May 03 '17 at 09:50
You forgot to add "**so that I can be sure to upload my crypto-mining data only when the user is not watching**" — Aaron Cicali, Aug 25 '20 at 20:31
this question has the answer you are looking for https://stackoverflow.com/questions/42193700/detect-when-inspect-element-is-open — Lutti Coelho, Oct 08 '20 at 14:42

guysigner · Answer 1 · 2017-01-13T07:10:16.440

12

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>

edited Jan 13 '17 at 07:10

answered Jan 13 '17 at 07:03

guysigner

2,822
1
19
23

1

More info on `debugger` in the docs from [mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger). – ashleedawg Nov 29 '19 at 12:18
Works. But doesn't look like you can use this behaviour to set a variable to indicate whether the DevTools are open - only that you can trigger a breakpoint if they are. – Luke Stevenson Jul 03 '20 at 09:44
It seems that it only works when you first enter the webpage and open the console. – Lancer.Yan Jul 29 '20 at 10:31
nice concept, is it possible to create debugger statements on run-time by js to various places to cause it more difficult to hack my js page. – Tom Aug 28 '20 at 11:42
@Tom what do you mean by "hack your JS page"? It's completely not possible to hide your website's source code. You could throw in any sort of client side obfuscation and it'll never work out. Anyone could check your JS code by just throwing `view-source:` in front of the URL, and opening your scripts. You can't check for that either. – Mar 16 '22 at 20:16
`debugger` is easy to bypass. You can just right click on the line and click "Never pause here". – hf02 Apr 11 '23 at 19:57

ashleedawg · Answer 2 · 2021-07-26T02:41:13.977

10

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.

edited Jul 26 '21 at 02:41

answered Nov 29 '19 at 12:26

ashleedawg

20,365
9
72
105

9

It checks the the window size, and it works fine until you detach the dev tools from the window, then it will not work anymore :). – Fabio Caccamo Jun 21 '20 at 14:40
2

Didn't work for me. But, as Fabio notes - I had my DevTools detached. – Luke Stevenson Jul 03 '20 at 09:42
5

It doesn't detect devtools; it detects sudden change in window size and would more rightly be named `sudden-window-size-change-detect` – Gershom Maes Oct 28 '20 at 17:26
This one doesn't work if you zoom your page to even a slight 110%. – Uahnbu Tran Jun 23 '21 at 18:19

score 3 · Answer 3 · edited May 23 '17 at 12:09

3

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.

edited May 23 '17 at 12:09

Community

1
1

answered Jan 13 '17 at 05:14

S M

3,133
5
30
59

If the inspector is already open on page load in that case your first solution has failed! 2. according to `James Hill` it's not possible. 3. if we undock dev tools (open dev tools in separate window) it won't work. Thanks for your support – Super User Jan 13 '17 at 09:08
1

What *"security issues"* could possibly arise from detecting whether a built-in browser feature is being used? – ashleedawg Nov 29 '19 at 12:11
I can imagine exposing the dev console's state could allow for better fingerprinting. And sites could also lead non-savvy users to open the console with a hotkey, and then show feedback, overall prompting them to do something malicious – Gershom Maes Apr 09 '20 at 18:10

score 2 · Answer 4 · edited Jul 09 '20 at 08:57

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.

If the inspector is already open on page load in that case your solution is failed! — Super User, Jan 13 '17 at 05:34
@Goose I know, but your caveats were buried in your answer, and you phrased it unusually - “opens the console in a new window”. I added my comment so this detail is easily spotted, as I know it wasn’t for me. — Luke Stevenson, Jul 04 '20 at 22:53

score 1 · Answer 5 · edited Feb 08 '21 at 09:23

(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.

This no longer works (I assume it did at some point), as debuggers don't invoke defined getters. It will just show `id:(...)` or `id:>>` in the debugger, until the user clicks it. Only then will the event fire. — Jools, Mar 24 '21 at 19:33

score 0 · Answer 6 · answered Jun 30 '21 at 13:21

0

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

answered Jun 30 '21 at 13:21

Bruno

6,623
5
41
47

Already answered in 2019 on this same question at https://stackoverflow.com/a/59104794/118153 - also some discussion there about where it doesn't work. Though, since I've had little or no success with charms working as intended, perhaps it does work like a charm. – Iiridayn Jul 19 '23 at 00:33
@Iiridayn this solution still works - also it is still on development - of course would be greate have there more " pull req " and " releases " https://github.com/sindresorhus/devtools-detect/releases – Bruno Jul 20 '23 at 10:49

Pandora · Answer 7 · 2022-03-16T19:13:31.750

-2

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

edited Mar 16 '22 at 19:13

answered Mar 16 '22 at 19:01

Pandora

1
2

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 17 '22 at 05:11

Detect if console/devtools is open in all browsers

7 Answers7

`devtools-detect` → ^{_{detect whether DevTools is open, and its orientation.}}

Linked

Related

Detect if console/devtools is open in all browsers

7 Answers7

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

Linked

Related

`devtools-detect` → ^{_{detect whether DevTools is open, and its orientation.}}