PROWAREtech

articles » current » javascript » stop-developer-tools-and-inspect-element

JavaScript: Stop Developer Tools and the Inspect Element Option

How to disable F12 and Ctrl+Shift+I for developer tools and the inspect element context menu option on all browsers.

While this method is not 100% full proof, it will work to prevent most users from modifying a web application using the browser's developer tools and the inspect element option.

The key to making this work is to check for certain keys and to disable the context menu.

This code makes it very difficult for users to quickly dig into the HTML elements to modify their properties or code.


// Compile and run this code and see if it is easy to use F12 for developer tools or use the context menu to inspect an element
var addHandler = function (element, type, handler) {
	if (element.addEventListener) {
		element.addEventListener(type, handler, false);
	} else if (element.attachEvent) {
		element.attachEvent("on" + type, handler);
	} else {
		element["on" + type] = handler;
	}
};

var preventDefault = function (event) {
	if (event.preventDefault) {
		event.preventDefault();
	} else {
		event.returnValue = false;
	}
};

addHandler(window, "contextmenu", function (event) {
	preventDefault(event);
});
document.onkeydown = function (event) {
	if (event.keyCode == 123) { // Prevent F12
		return false;
	}
	else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) { // Prevent Ctrl+Shift+I        
		return false;
	}
};

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE