How to Disable Inspect Element of a Website?

1. Use of the F12 key on the browser:

This can be blocked using a javascript key event listener. Use the below script to accomplish it.

<!-- wp:code -->
<pre class="wp-block-code"><code>$(document).keydown(function(e){ 
    if(e.which === 123){ 
 
       return false; 

    } 

}); </code></pre>
<!-- /wp:code -->

2. Use of Right click

You can block this using javascript or with just your HTML

<html oncontextmenu="return false"> 
</html>

$(document).bind("contextmenu",function(e) {  
	e.preventDefault(); 
 
});

3. Use of other shortcuts involving Ctrl keys

<body oncontextmenu="return false" onkeydown="return false;" onmousedown="return false;"> 
Your body content 
</body>

4. By temporarily removing DOM when the inspect is opened

What the below snippet does is detect when the debugger is opened, removes the code, and stores the code in a variable and when the debugger is closed, it returns it.

var currentHtmlContent; 
 
var element = new Image(); 
 
var elementWithHiddenContent = document.querySelector("#element-to-hide"); 
 
var innerHtml = elementWithHiddenContent.innerHTML; 
 
element.__defineGetter__("id", function() { 
 
    currentHtmlContent= ""; 
 
}); 
setInterval(function() { 
 
    currentHtmlContent= innerHtml; 
 
    console.log(element); 
 
    console.clear();  
 
    elementWithHiddenContent.innerHTML = currentHtmlContent; 

}, 1000);

Leave a comment Cancel reply