If you are a web developer, you might have spent a lot of time and effort to create your website code. You might also want to protect your code from being copied, modified, or tampered with by unauthorized users.
One way to do that is to disable the developer tools (DevTools) in the browser, which are commonly used to inspect, debug, and edit the website code. But, how to disable developer options on your website? Let's find out.
Developer options are a set of tools that allow web developers to inspect, debug, and modify the code of a web page. They can be accessed by pressing F12 or Ctrl+Shift+I on most browsers.
While developer options can be useful for testing and troubleshooting, they can also pose a security risk for your website.
Anyone who visits your website can use developer options to view, copy, or tamper with your source code, HTML, CSS, and JavaScript files. This can lead to plagiarism, hacking, or malicious attacks. Fortunately, there is a way to disable developer options using javascript.
In this blog post, I will show you how to disable DevTools with JavaScript (JS). This method works for most modern browsers, such as Chrome, Firefox, Edge, and Safari. By disabling developer options, you can protect your website code from getting copied or modified by unauthorized users.
Disable Dev Tools using JavaScript
The basic idea is to use the JS event listener to detect when DevTools are opened or closed. When DevTools are opened, we can either redirect the user to another page, show an alert message, or execute any other custom code. When DevTools are closed, we can restore the original page or do nothing.
This can be achieved by adding a JavaScript hosted on specific Content Delivery Network (CDN) to the page where you want to disable the dev-tools.
For instance, if you have a master page in your website structure, you can add the CDN to this master page. The process would look something like this: Login -> MasterPage. By doing so, if anyone tries to inspect your website using developer tools, they will be redirected to the login page instead.
However, due to certain restrictions, you might not be able to paste the script directly. But don’t worry, there’s a workaround for this. You can use the following script:
<script disable-devtool-auto src='cdn.jsdelivr.net/npm/disable-devtool' ></script>
You can simply copy and paste this code in the HTML of the web page where you want to disable developer tools.
This script will disable right click and all key board short cuts to open Developer tools and inspect elements options. If someone tries to open dev tools manually from browser, the page will automatically get redirected to the last visited page.
This is a simple yet effective way to enhance the security of your website by disabling the developer tools on specific pages.
Please note that this technique is not foolproof. While this method can prevent casual users from accessing your code, it’s important to note that it can be bypassed by experienced users or developers. It is important to keep this in mind when designing your website.
However, this script may cause some issues if you have some elements on your page that need right-click functionality. For example, input boxes usually allow users to right-click for various options, and disabling this feature may affect user accessibility.
To solve this problem, you can use this code on the input boxes. This code prevents the right-click event from reaching the parent elements, so the input boxes can still have right-click functionality while the rest of the page does not.
oncontextmenu="event.stopPropagation();"
You can also apply this code to other elements that need right-click functionality, such as textarea or other elements. Example,
<textarea oncontextmenu="event.stopPropagation();">
This is how you can disable developer options with JS and protect your website code from unauthorized access.
I hope you found this blog post helpful and informative. If you have any questions or feedback, please leave a comment below.