DEV Community

Cover image for Chrome Devtools Detection by Website

Posted on • Updated on

Chrome Devtools Detection by Website


mY name is Vikram and i am recently jumped into CodingWorld.
Initially i was learning laravel and now im in vuejs.

As a new bie to this world. I was working on devtools auto detect by website and if detected hide the all content. Once user closed the inspect window reload the site and voila! content shown.

after Much googling and overflowing stacking. I ended up in a bottle neck where if inspect window is undocked outside and if closed it should reload the website but not doing so.

If here in this community any one help me out it will be appreciated.
Here is my code

const debuggerCheck = null;
      var aCheck = false;
      class devtools {
    constructor() { }
    static toString() {
        // alert('in')
        aCheck = true;
        return "-";

       setInterval(() => {
        // alert(a)
        if (aCheck) {
          localStorage.setItem("check", 1); 
          document.body.innerHTML =
            '<h2 style="width:100%;text-align:center; margin-top:100px "><strong>Sorry</strong>, but you have opened Developer Tools and you can\'t continue using this app.</h2>';
          aCheck = false;
        } else {
      }, 1000);

      function check() {
        if (localStorage.getItem("check") == 1) {
          localStorage.setItem("check", 2);

      document.onkeydown = function(e) {         
            if (e.keyCode == 123) { 
                return false; 
            if (e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) { 
                return false; 
            if (e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) { 
                return false; 
            if (e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) { 
                return false; 
            if (e.ctrlKey && e.keyCode == 'C'.charCodeAt(0)) { 
                return false; 
            if (e.ctrlKey == true && (e.which == '67')) {
                return false;
            if (e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) { 
                return false; 
            if (e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) { 
                return false; 
    //    document.addEventListener('contextmenu', function(e) {
    //         e.preventDefault();
    //         }, false);

 export default {debuggerCheck}

Enter fullscreen mode Exit fullscreen mode

It should work like if user opened console/inspect element window, All the site content blocked by an msg and if console is closed site content visible again. And if console window is undocked and then closed it must do the same but not doing.

I was working on this piece of code from couple of days and found no solution yet. Hence posting this article here in search of answers and idea.

Top comments (1)

menjilx profile image
Menj • Edited

This trick -> is still working on chrome, brave and safari. :)
But I haven't tried the sample code above.

Thanks for sharing this code!