Last Updated: June 14, 2019
·
19.32K
· dpashkevich

Detect if Chrome DevTools are open

Here's an interesting snippet taken from the validation code in the new Discover DevTools course prepared by Google and CodeSchool (check it out, btw, it's awesome!):

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

It exploits the fact that CPU profiles aren't actually run if DevTools are closed. Looks hacky but it works!

P.S. The same trick is also reported to work with Firefox+Firebug.

UPD This no longer works starting from Chrome 29 due to removal of console.profiles from window.console API. Related Chromium issue: https://codereview.chromium.org/15816002

9 Responses
Add your response

Hah, someone brought it even this far! :) Thanks)

over 1 year ago ·

It is not support Chrome > 29

over 1 year ago ·

Yup, it no longer works as console.profiles was removed. See https://codereview.chromium.org/15816002

over 1 year ago ·

devtools-detect* works with the latest Chrome/Safari/Firefox devtools and Firebug.

over 1 year ago ·

@sindresorhus Hehe, back to the window height method :) Thanks for sharing!

over 1 year ago ·
over 1 year ago ·

@guya it's amazing how this topic is still alive! Interesting approach :) My results are unstable though - the text keeps changing between 'Opened' and 'Closed', all I do is move the mouse around.

over 1 year ago ·

all these above met

over 1 year ago ·