Chrome Devtools Detection by Website

VikramJS — Wed, 24 Nov 2021 08:34:32 +0000

Hi,

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 https://pastebin.com/PBpRC2dB



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

       setInterval(() => {
        console.profile(devtools);
        // 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 {
          check();
        }
        console.profileEnd(devtools);
        console.clear()
      }, 1000);

      function check() {
        if (localStorage.getItem("check") == 1) {
          window.location.reload();
          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}

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.

DEV Community: VikramJS

Chrome Devtools Detection by Website