Find out if the Chrome console is open

Question

I use this little script to find out if Firebug is open:

if (window.console && window.console.firebug) { //is open }; 

And it works well. Now I searched for half an hour to find a way to determine if the built-in Google Chrome web developers console was open, but I could not find the hints.

It:

 if (window.console && window.console.chrome) { //is open }; 

does not work.

EDIT:

Therefore, it seems impossible to detect if the Chrome console is open. But there is a " hack " that works with some flaws:

• will not work if the console is undocked.
• will not work when the console is open when the page loads

So, I'm going to select Unsigned answer at the moment, but if a brilliant idea appears in Some1, he can always answer, and I change the selected answer! Thank!

Answer 1

toString function (2019)

Thanks to Overcl9ck for commenting on this answer. Replacing the regular expression / /./ an empty function object still works.

 var devtools = function(){}; devtools.toString = function() { this.opened = true; } console.log('%c', devtools); // devtools.opened will become true if/when the console is opened 

regex toString (2017-2018)

Since the original asker no longer exists, and this is still an accepted answer, we add this solution for clarity. Acknowledgment author Antonin Hildebrand comments on zswang answer . This solution takes advantage of the fact that toString() not called for registered objects if the console is not open.

 var devtools = /./; devtools.toString = function() { this.opened = true; } console.log('%c', devtools); // devtools.opened will become true if/when the console is opened 

console.profiles (2013)

Update: console.profiles been removed from Chrome. This solution no longer works.

Thanks to Paul Irrish for pointing out this solution from Discover DevTools using the profiler:

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

window.innerHeight (2011)

This other parameter may detect the open pinned inspector after loading the page, but will not be able to detect an unsecured inspector or if the inspector was already open when the page loaded. There is also some potential for false positives.

 window.onresize = function() { if ((window.outerHeight - window.innerHeight) > 100) alert('Docked inspector was opened'); } 

Answer 2

Chrome 65+ (2018)

 r = /./ r.toString = function () { document.title = '1' } console.log('%c', r); 

demo: https://jsbin.com/cecuzeb/edit?output (update on 2018-03-16)

package: https://github.com/zswang/jdetects

---

When an "Element" is printed, Chrome Developer Tools will receive its identifier

 var checkStatus; var element = document.createElement('any'); element.__defineGetter__('id', function() { checkStatus = 'on'; }); setInterval(function() { checkStatus = 'off'; console.log(element); console.clear(); }, 1000); 

Another version (from comments)

 var element = new Image(); Object.defineProperty(element, 'id', { get: function () { /* TODO */ alert('囧'); } }); console.log('%cHello', element); 

Output normal variable ：

 var r = /./; r.toString = function() { document.title = 'on'; }; console.log(r); 

Answer 3

I created devtools-detect , which detects when DevTools is open:

 console.log('is DevTools open?', window.devtools.open); 

You can also listen to the event:

 window.addEventListener('devtoolschange', function (e) { console.log('is DevTools open?', e.detail.open); }); 

This does not work when DevTools is undocked. However, it works with Chrome / Safari / Firefox DevTools and Firebug.

Answer 4

I found a way to find out if the Chrome console is open or not. It is still hackable, but its path is more accurate and will work when the console is undocked or not.

Basically, this code with a closed console takes about 100 microseconds, and when you open the console, it takes about two times more than ~ 200 microseconds.

 console.log(1); console.clear(); 

(1 millisecond = 1000 μs)

I wrote more about this here .

Demo is here .

---

Update:

@zswang found the current best solution - check his answer

Answer 5

If your goal is to hush the developer tools, try this (I found a more complex version in the place where the JS code was confused, this is very annoying):

 setTimeout(function() {while (true) {eval("debugger");}}, 0); 

Answer 6

Very reliable hack

Basically set getter for the property and go to the console. Apparently, access to this thing is possible only with the console open.

https://jsfiddle.net/gcdfs3oo/44/

 var checkStatus; var element = new Image(); Object.defineProperty(element, 'id', { get:function() { checkStatus='on'; throw new Error("Dev tools checker"); } }); requestAnimationFrame(function check() { checkStatus = 'off'; console.dir(element); document.querySelector('#devtool-status').innerHTML = checkStatus; requestAnimationFrame(check); }); 

Answer 7

I found a new method:

 var b=new Blob() Object.defineProperty(b,'size',{get(){ alert('The devtool was opened!') }}) setTimeout(function(){console.log(b)},3000) 

test online

Answer 8

There is a tricky way to check it for extensions with tabs permission:

 chrome.tabs.query({url:'chrome-devtools://*/*'}, function(tabs){ if (tabs.length > 0){ //devtools is open } }); 

You can also check if it is open for your page:

 chrome.tabs.query({ url: 'chrome-devtools://*/*', title: '*example.com/your/page*' }, function(tabs){ ... }) 

Answer 9

I wrote a blog post about this: http://nepjua.org/check-if-browser-console-is-open/

It can determine if it is docked or undocked.

 function isConsoleOpen() { var startTime = new Date(); debugger; var endTime = new Date(); return endTime - startTime > 100; } $(function() { $(window).resize(function() { if(isConsoleOpen()) { alert("You're one sneaky dude, aren't you ?") } }); }); 

Answer 10

The Chrome developer tools are just part of the WebKit WebCore library. Therefore, this question applies to Safari, Chrome, and other WebCore consumers.

If a solution exists, it will be based on the difference in the DOM when the WebKit inspector is open and when it is closed. Unfortunately, this is a kind of chicken and egg problem, because we cannot use the inspector to observe the DOM when the inspector is closed.

What you can do is write some JavaScript to dump the entire DOM tree. Then run it once when the inspector is open, and once when the inspector is closed. Any difference in the DOM is probably a side effect of the web inspector, and we can use it to test if the user checks or not.

This link is a good start to reset the DOM script, but you will want to reset the entire DOMWindow object DOMWindow not just document .

Update:

There seems to be a way to do it now. Check out the Chrome Inspector

Answer 11

You can also try the following: https://github.com/sindresorhus/devtools-detect

 // check if it open console.log('is DevTools open?', window.devtools.open); // check it orientation, null if not open console.log('and DevTools orientation?', window.devtools.orientation); // get notified when it opened/closed or orientation changes window.addEventListener('devtoolschange', function (e) { console.log('is DevTools open?', e.detail.open); console.log('and DevTools orientation?', e.detail.orientation); }); 

Answer 12

If you are developers who do things during development. Check out this Chrome extension. This will help you detect when Chrome Devtoos is open or closed.

https://chrome.google.com/webstore/detail/devtools-status-detector/pmbbjdhohceladenbdjjoejcanjijoaa?authuser=1

This extension helps Javascript developers detect that Chrome Devtools is open or closed on the current page. When Chrome Devtools closes / opens, the extension will raise an event called "devtoolsStatusChanged" in the window.document element.

This is a sample code:

  function addEventListener(el, eventName, handler) { if (el.addEventListener) { el.addEventListener(eventName, handler); } else { el.attachEvent('on' + eventName, function() { handler.call(el); }); } } // Add an event listener. addEventListener(document, 'devtoolsStatusChanged', function(e) { if (e.detail === 'OPENED') { // Your code when Devtools opens } else { // Your code when Devtools Closed } }); 

Answer 13

Some of the answers here will stop working in Chrome 65. Here is an alternative to time synchronization, which works quite reliably in Chrome, and it is much harder to mitigate than the toString() method. Unfortunately, this is not so reliable in Firefox.

 addEventListener("load", () => { var baseline_measurements = []; var measurements = 20; var warmup_runs = 3; const status = document.documentElement.appendChild(document.createTextNode("DevTools are closed")); const junk = document.documentElement.insertBefore(document.createElement("div"), document.body); junk.style.display = "none"; const junk_filler = new Array(1000).join("junk"); const fill_junk = () => { var i = 10000; while (i--) { junk.appendChild(document.createTextNode(junk_filler)); } }; const measure = () => { if (measurements) { const baseline_start = performance.now(); fill_junk(); baseline_measurements.push(performance.now() - baseline_start); junk.textContent = ""; measurements--; setTimeout(measure, 0); } else { baseline_measurements = baseline_measurements.slice(warmup_runs); // exclude unoptimized runs const baseline = baseline_measurements.reduce((sum, el) => sum + el, 0) / baseline_measurements.length; setInterval(() => { const start = performance.now(); fill_junk(); const time = performance.now() - start; // in actual usage you would also check document.hasFocus() // as background tabs are throttled and get false positives status.data = "DevTools are " + (time > 1.77 * baseline ? "open" : "closed"); junk.textContent = ""; }, 1000); } }; setTimeout(measure, 300); });