How to prevent regular users from opening the chrome developer tools in the browser with JavaScript

You can't prevent users from opening the developer's tools in the browser, that's for sure. At the end of all, they will be able always to open it through the settings of the browser and selecting Developer Tools. 

There was an interesting discussion about this in 2014 as Facebook was able to block totally the developer's tool window when the user opened it. Although they achieve it, this was patched in every browser after a while as the developer shouldn't be able to disable this window. 

However, you can of course block most of the default ways to open it. These default ways are:

• Through the context menu in the browser (when doing right-click over the document).
• Through the keyboard shortcut (Ctrl + Shift + I).

If you are still interested in blocking the mentioned features, then the following JavaScript snippet will do the trick:

window.oncontextmenu = function () {
    return false;
};

document.addEventListener("keydown", function(event){
    var key = event.key || event.keyCode;

    if (key == 123) {
        return false;
    } else if ((event.ctrlKey && event.shiftKey && key == 73) || (event.ctrlKey && event.shiftKey && key == 74)) {
        return false;
    }
}, false);

What this script does first is to disable the context menu of the browser with the first function. Then, an event listener is attached to the document, so when the user presses a special key, specifically the required combination to show the developer tools through the keyboard shortcut (Ctrl + Shift + I), it will do nothing.

Happy coding ❤️!