When the devtools inspection is not available, it typically means that the website is currently in production mode or the author has disabled the devtools intentionally. This restriction is often implemented to prevent users from accessing sensitive or proprietary information, modifying the website’s behavior, or debugging the code.
In production mode, the code is optimized and minified, making it harder to understand and debug. Developers usually enable devtools inspection only in development or staging environments where they can freely debug and troubleshoot issues.
Disabling devtools can be done in several ways. One approach is through JavaScript code using the `window.oncontextmenu` event, which triggers when a user right-clicks on the page. By preventing the default context menu, the author can block access to the devtools inspection.
window.oncontextmenu = function(e) {
e.preventDefault();
};
Another method to disable devtools is by overriding the shortcut keys used to open the browser’s devtools. This can be achieved by listening to the keyboard events, such as the `keydown` event, and preventing the default behaviour when the specific shortcut keys are pressed.
document.addEventListener('keydown', function(e) {
if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) {
e.preventDefault();
}
});
It is important to note that although devtools inspection may be disabled or restricted, it is not foolproof. Determined users can employ various techniques to bypass these restrictions, so it should not be solely relied upon as a security measure. Its primary purpose is to aid developers during the development and debugging phases.