DEV Community

loading...

A simple way to detect devtools.

Ukjin Yang
I'm a freelance full stack developer, from hell.
Updated on ・1 min read

After I made this implementation, I found related issue on stack overflow.

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…

but this code is just a showcase. I will show you how to really detecting devtools for all major browsers.

If you know debugger, You're all set!
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.

!function() {
  function detectDevTool(allow) {
    if(isNaN(+allow)) allow = 100;
    var start = +new Date(); // Validation of built-in Object tamper prevention.
    debugger;
    var end = +new Date(); // Validates too.
    if(isNaN(start) || isNaN(end) || end - start > allow) {
      // input your code here when devtools detected.
    }
  }
  if(window.attachEvent) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
        detectDevTool();
      window.attachEvent('onresize', detectDevTool);
      window.attachEvent('onmousemove', detectDevTool);
      window.attachEvent('onfocus', detectDevTool);
      window.attachEvent('onblur', detectDevTool);
    } else {
        setTimeout(argument.callee, 0);
    }
  } else {
    window.addEventListener('load', detectDevTool);
    window.addEventListener('resize', detectDevTool);
    window.addEventListener('mousemove', detectDevTool);
    window.addEventListener('focus', detectDevTool);
    window.addEventListener('blur', detectDevTool);
  }
}();
Enter fullscreen mode Exit fullscreen mode

you can see demo how it works: https://jsfiddle.net/composite/3r6dq51y/

that's all. but remember, you can detect only devtools, not security concerns.

happy coding!

Discussion (9)

Collapse
jrsofty profile image
Jason Reed

Why is it important to recognize that the dev tools are open?

Collapse
joshcheek profile image
Josh Cheek

It would be nice if banks would detect this, b/c a common scam is for the scammer to get access to the target's computer, have them log into their bank, and then use the dev tools to edit the DOM to make it look like there was an unintentionally large deposit. Then they ask the target to send them a refund for the excess money that appears to be deposited into their account, but never was. The bank could realize that they had the devtools open shortly before trying to purchase thousands of dollars worth of gift cards, and then decline the transaction under the assumption that the person is being scammed.

Collapse
taufik_nurrohman profile image
Taufik Nurrohman

Maybe to prevent XSS, or…

Back then, there were people using JavaScript to disable selection and right-click event to prevent them copying the article contents. This must be something like that.

Collapse
tiagorangel2011 profile image
Tiago Rangel • Edited

Mmm... Maybe so users can't copy your code, maybe to prevent XSS...

Collapse
jrsofty profile image
Jason Reed

It's very naive to think that detecting dev tools will prevent someone from copying your code. So long as your code is delivered to a browser it can be copied. Never think that anything you send to a browser is secure.

Collapse
composite profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Ukjin Yang Author

Well, Some stupid web developers who need protection for their contents, resources, other copyrights, etc. I think.

Collapse
mitmelon profile image
Manomite

You should not say such... Are you an hacker... Aren't you security wise too... Stop negative words...

Collapse
matiaslopezd profile image
Matías López Díaz

This not works to "protect the code", it only crashes the app. You can continue using, except for real-time apps because if I change the var "allow" to 99999 and close Devtools, can continue using without problems, also is a great state for any "hacker" for the check without any state change.

Also, decrease performance and can break any app if is executed on devices that can take more than 100ms to process every cycle. That is possible too in browsers have too many tabs opened, test it!

The best example is to try to use WebRTC with this, which consumes a lot of CPU and decreases performance.

Interesting code, but not to add to apps in production.

Collapse
matiaslopezd profile image
Matías López Díaz

change allow var