DEV Community

Cover image for Disable inspect element - DevTools in your Website

Disable inspect element - DevTools in your Website

Nguyễn Công Dũng on March 14, 2022

A Website can build with simple HTML / CSS / Javascript. When you published, all source code can see with DevTools of Browser. What is D...
Collapse
 
harshadsatra profile image
Harshad

Neat trick,

Do you have any idea on how to prevent site access, if the user opens the devtools from navigation menu.

Check this website for reference:
mca.gov.in/content/mca/global/en/h...

Collapse
 
pvcodes2020 profile image
pvcodes

How to do that?

Collapse
 
sai_sandeepsaka_a2a2a726 profile image
Sai Sandeep Saka

can u say how to do it

Collapse
 
sidintechnics profile image
Sid • Edited

here you go buddy.
disable-devtool
Just a side note, by default doesn't work on debug mode, works on release mode. Enjoy

Collapse
 
maheshbasnet089 profile image
Mahesh Basnet

hello can u show me the code to prevent site from navigation menu devtools click?

Thread Thread
 
sidintechnics profile image
Sid • Edited

Just add this cdn on the page where you want to disable the dev-tools. Example if you have a master page then add on the master page.

Login -> MasterPage.

If you add to master page then if someone try to inspect then it will take them to login page.

It didn't allow me to paste the script directly, so I am doing like this:

<$cR!Pt disable-devtool-auto src='cdn.jsdelivr.net/npm/disable-devtool' ></$cR!Pt>

Just replace: $cR!Pt with -> script, on both opening and closing tags.

Since it is a cdn, you can copy and paste the url in your browser and then it will show you the code.

Collapse
 
kolja profile image
Kolja

You can hack it by:
open DevTools -> goto your "protected" site.

Collapse
 
agni2012 profile image
Agni R. Rammohan

They will just use
tapermonkey/extention
or
bookmarklet
or
url js

Collapse
 
andaeiii profile image
Ande Caleb

you can hack this by pressing F12 on the keyboard... use the devtools.js ( devtools.isOpen) functionality to control and restrict access

Collapse
 
codetester547 profile image
CodeTester547

Dev tool can be closed completely using Script.
Check this for reference:
How to Disable Developer Tools completely for your webpage?