How to detect Chrome Inspect Element is running or not?

Question

Is there any way to detect whether the Chrome Inspect Element window is running?

For example if the user clicks "Inspect Element" in Chrome, the window shows a Hello World alert.

Is that possible?

hmmm, you can deinfately monitor a "Right Click", although I doubt you can see what option they pick. So you could change the behavior of the right click action and maybe show your box then? — Abe Petrillo, Sep 23 '11 at 10:17
yes Abe I know that I can change the right click. but really i want to monitor if inspect element is running and doing anything. for example running a javascript function. — Mohammed Shannaq, Sep 23 '11 at 10:30
See [Find out whether Chrome console is open](http://stackoverflow.com/a/19256983/64949) for a working solution. — Sindre Sorhus, Oct 08 '13 at 19:53

Dmitry Pashkevich · Answer 1 · 2013-10-08T21:25:14.420

33

UPDATE This no longer works. The property console.profiles has been removed in Chrome 29.

The only solution that's left is checking the difference between window.outerHeight and window.innerHeight as suggested by @Gerben. There is a library devtools-detect based on this method which adds devtoolschange to the window object.

Alternatively, there is an effort in progress to create a Chrome extension using a more robust detection method, see this Google Group.

Here's how they check if DevTools are open in the first challenge of Discover DevTools interactive course:

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

edited Oct 08 '13 at 21:25

answered Mar 22 '13 at 10:12

Dmitry Pashkevich

13,431
9
55
73

11

Hah! You're welcome. ;) – Paul Irish Mar 24 '13 at 04:13
1

Works on firefox for firebug. – Hamed Al-Khabaz Mar 24 '13 at 04:17
1

This guy created a micro test framework and a [demo page](http://adamschwartz.co/chrome-inspector-detector/) based on the solutions suggested here. Also, you're awesome, Paul :) – Dmitry Pashkevich Mar 26 '13 at 11:28
2

You can make this technique slightly less obtrusive by using a collapsed console group to hide the messages that are generated by running the profiler. See https://github.com/adamschwartz/chrome-inspector-detector – Adam Apr 12 '13 at 03:51
4

This will cease to work soon in Chrome: https://codereview.chromium.org/15816002 (Sorry, y'all) – Paul Irish Jun 04 '13 at 19:23
@PaulIrish There's gotta be another way to detect whether the DevTools are open! Can't you guys just expose a boolean? – Steven Lu Jul 16 '13 at 15:25
@PaulIrish and the appropriate event :) Looks like such functionality can facilitate app debugging process (as meta as it may sound) – Dmitry Pashkevich Jul 16 '13 at 19:48
1

there is another way but it's a bit hacky :) http://nepjua.org/check-if-browser-console-is-open/ – Yasin Uslu Dec 06 '14 at 23:45
Many of us dock our dev tools to the right. This will not work for us. – A F Feb 09 '15 at 16:40

score 13 · Accepted Answer · answered Sep 23 '11 at 14:05

13

window.onresize = function(){
 if((window.outerHeight-window.innerHeight)>100)
   alert('hello');
}

In action: http://jsbin.com/ediquk/

Note that it seems like the resize event gets fired twice, so you should check whether you alerted the use already.

answered Sep 23 '11 at 14:05

Gerben

16,747
6
37
56

Works in firefox too, but you need to put the alert inside in timeout, because otherwise the layout freezes. See http://jsbin.com/ediquk/3 – Gerben Sep 23 '11 at 14:08
1

Is it correct that this only works when the window is docked? – pimvdb Sep 23 '11 at 16:15
5

Yes. Only when docked. I don't see how you can detect a undocked inspector. – Gerben Sep 23 '11 at 16:23
3

But this also fires whenever the window is resized... which happens a lot more often than opening the inspector. – sachleen Mar 24 '13 at 03:23
2

I suspect this would also be triggered by someone with multiple toolbars, or other extensions which modify the browser's UI. The Chrome bookmark toolbar, for instance, counts against this calculation. – David Smith Jun 28 '13 at 22:51
It fires when the window is "restored" – unloco Sep 18 '16 at 21:43
@UnLoCo that's why you check the inner and outer height. – Gerben Sep 19 '16 at 19:06
I double clicked the chrome title bar and it alerted – unloco Sep 26 '16 at 12:51
I try, but the alert goes off every time I change the size of the window to a smaller height – Daniel Torres Laserna Jul 05 '18 at 21:37

How to detect Chrome Inspect Element is running or not?

2 Answers2

Linked