How to Disable Inspect Element in Website? (4 Simple Methods)

Do you want to know How to Disable an Inspect Element in Website?

If you have a simple webpage, web application, or web-based game, disabling Inspect Element can help prevent users from manipulating the code.

However, completely disabling Inspect Element is not foolproof, as users can always find ways to bypass it.

However, by implementing these techniques, you can discourage casual users from accessing your website’s source code.

Use Cases for Disabling Inspect Element

Prevent Code Theft – Protect proprietary HTML, CSS, and JavaScript code from being copied.
Prevent Data Manipulation – Avoid users tampering with hidden fields, forms, or JavaScript variables.
Secure API Calls & Data – Reduce exposure of sensitive API endpoints or AJAX requests.
Restrict Right-Click Actions – Prevent users from easily copying images, text, or links.
Prevent Cheating in Games or Applications – Hide critical game data that can be modified via the console.

Method 1: Disable Right-Click

<script>
  document.addEventListener("contextmenu", (event) => event.preventDefault());
</script>

In the first method, you can disable the right-click functionality to prevent users from accessing the context menu.

Once you add the above JavaScript code to your webpage, users will no longer be able to open the context menu in their browser.

If users can’t open the context menu, it indirectly restricts access to the “Inspect Element” option on the website.

However, there’s a small catch—if the user is familiar with Chrome shortcuts, they can still open the Inspect Element using Ctrl + Shift + I.

You can also prevent users from using keyboard shortcuts to access Inspect Element. Check Method 2 for details.

Also see: How to Disable HTML Code Without Deleting? (6 Methods)

Method 2: Disable Keyboard Shortcuts

<script>
  document.addEventListener("keydown", (event) => {
    if (
      event.ctrlKey && 
      (event.key === "u" || event.key === "U" || event.key === "i" || event.key === "I" || event.key === "j" || event.key === "J") ||
      event.key === "F12"
    ) {
      event.preventDefault();
    }
  });
</script>

By using the above JavaScript code, you can prevent users from using keyboard shortcuts to open Inspect Element.

In the code, we listen for the keydown event, and if any keyboard shortcut related to Inspect Element is detected, the event is blocked using the preventDefault method.

This is a simple yet effective code. You can combine Method 1 and Method 2 to prevent users from accessing Inspect Element through right-clicking and keyboard shortcuts on the website.

Method 3: Disable-Devtool Library

As a web developer, you may be aware that users can still access Inspect Element via Chrome’s “More Tools” option in the right-side menu.

By following Method 1 and Method 2, you can disable the context menu and keyboard shortcuts. However, users can still enable Inspect Element through Chrome’s right-side menu by selecting the “More Tools” option.

However, there is a way to disable this option as well, preventing even advanced users from accessing your website’s code.

JavaScript does not provide an option to disable Chrome DevTools, but there is a useful npm library called disable-devtool that can help.

The disable-devtool library has 3,514 weekly downloads and offers many features. The one we’re interested in is the option to disable Inspect Element.

The great thing about this package is that it also provides a CDN, allowing you to easily disable DevTools by adding it to your website’s header.

<!DOCTYPE html>
<html>
<head>
<title>How to Disable Inspect Element in Website</title>

<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Method 4: Detect and Redirect If DevTools Opens

    <script>
      setInterval(() => {
        if (
          window.outerWidth - window.innerWidth > 160 ||
          window.outerHeight - window.innerHeight > 160
        ) {
          alert("DevTools detected! Redirecting...");
          window.location.replace("https://google.com");
        }
      }, 500);
    </script>

If you prefer not to use any third-party libraries but still want to disable the inspect element on your website, you can use Method 4.

In this method, I check whether DevTools is open. If it is detected, the user will be redirected to another website, such as Google.com.

However, this method may slightly slow down your site, but it’s still an effective way to prevent users from accessing the Inspect Element on their computer. The best part is that you don’t need to rely on any third-party libraries.

Conclusion

Remember that you cannot completely disable the Developer Tools from the browser menu because it’s a built-in feature of modern browsers like Chrome, Firefox, and Edge.

However, you can make it more difficult for regular users to access or use it effectively.

I hope this helps you disable the Inspect Element in Chrome. You might also be interested in How to Validate Form in JavaScript Before Submit?

If you like this blog post then make sure to subscribe to our SingleSyntax YouTube channel for amazing dev development-related videos.

On this page