Detect if console/devtools is open in all browsers

Detect if console/devtools is open in all browsers

detect if firefox console is open
how to detect if console is open
javascript detect inspect element
js detect open console
player is not available with devtools opened
electron check if devtools is open
website detect developer tools
javascript check if debugger is attached

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?

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:

<p>Devtools is <span id='test'>off</span></p>
  var minimalUserResponseInMiliseconds = 100;
  var before = new Date().getTime();
  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';


Find out whether Chrome console is open, devtools.toString = function() { if (!this.opened) { alert("Opened"); } this.opened href="" I wrote a blog post about this: You may open the Edge browser console by clicking on F12 Developer Tools in the dropdown menu, or by pressing F12. You can also right-click on any element of the web page and select Inspect Element. Open Internet Explorer console The IE development console can be opened in the same way as the Edge console.

A simple way to detect devtools., answer re: Detect if console/devtools is open in all browsers. 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. this statement will active when devtools opened, no any other cases. many people found difficult ways to find to detect devtools, but these have been blocked by latest browsers. so it's only, simple way to detect devtools for protect your webapps, maybe. here's the code. insert this <script> to bottom of <body> in your webapp, and run it.

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.

sindresorhus/devtools-detect: Detect if DevTools is open , Detect if DevTools is open and its orientation. Contribute to sindresorhus/ devtools-detect development by creating an account on GitHub. Check if it's open console.log('Is DevTools open:', window.devtools.isOpen) Doesn't work if DevTools is undocked and will show false positive if you toggle any kind of sidebar. Yes. Please check the answer in the link I shared, It shows how to detect if console is open on firefox. The code you wrote will only work for Chrome devtool and not firefox. – Kiran Dash Aug 31 '17 at 12:35

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

672625 - Sites can detect when dev tools window is open, Sites should not be able to detect if the dev tools window is open. which contains For example the browser could keep a reference to Function. prototype. This seems preferable to playing whack-a-mole with all the possible vectors where� r/javascript: All about the JavaScript programming language! I don't like it. Spamming the console at 60fps is not worth it. My proposal, considering 128px enough for all browsers:

Detect if Chrome DevTools are open (Example), 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. Open the Elements panel to inspect the DOM or CSS. Open the Console panel to view logged messages or run JavaScript. Open the last panel you had open. Open DevTools from Chrome's main menu.

How To: Detect if the chrome dev console is open : javascript, All about the JavaScript programming language! How To: Detect if the chrome dev console is open when an adblock warning appears is open chrome dev tools and remove the show_modal It's going to suck if this is thwarted in the future. Explanation and more info; 5gtedd/� See all the console.log() statements from your front-end JavaScript code; Debug your script by setting breakpoints and stepping through it line by line; all directly within the browser. These are just examples of some of the features the DevTools provide to make it easier and faster for you to build and test your websites in Microsoft Edge.

Is there any way to detect if the javascript console or developer tools , Hi all I know I can see if part of the user's page is being covered by something by comparing Because we have the rights to inspect everything that runs on our browser. When I first tried contributing to open source it was very difficult finding� Style editing for CSS-in-JS frameworks, Lighthouse 6.0, new JavaScript features, and more.