Disable browser dev tool on a specific page

What is it?

Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load.

Why do we need to disable it?

Sometimes we developer don’t want user to use it for exploiting the page. Also it will prevent other competitors from inspecting and make it harder for them to learn our secrets.

How to do it?

I found a library to prevent user from opening the dev tool: theajack/disable-devtool: Disable web developer tools from the f12 button, right-click and browser menu (github.com).

Also, it can detect if the dev tool is opening or not. Below is my sample code in a project.

<script src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
<script>
    let disableDevtool = true;
    DisableDevtool({
        ondevtoolopen: (type) => {
            const info = 'Please close browser inspection tool before continuing';
            if (disableDevtool) {
                alert(info); // If you are worried about blocking the page, use console.warn(info); and open the console to view
                history.back();
                disableDevtool = false;
            }
        },
    })
</script>