24

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?

pimvdb
  • 151,816
  • 78
  • 307
  • 352
Mohammed Shannaq
  • 806
  • 3
  • 8
  • 21
  • 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

2 Answers2

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;
}
Dmitry Pashkevich
  • 13,431
  • 9
  • 55
  • 73
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.

Gerben
  • 16,747
  • 6
  • 37
  • 56