How to Simple Disable Right Click and Shortcut Developer Console

Hi Folks! Today I would like to share simple code to disable right click and shortcut developer console in web browser. Actually, when we use an application or system in a web browser it is possible that we can see the structure of HTML elements that build the page. But sometimes there are some developers who want to protect HTML elements, one of which is by protecting the right click on the mouse or inspecting elements with shortcuts on the keyboard.

The development of browser technology is very fast, the features in the web browser are actually also equipped with special menus for web developers such as the developer console. This is a way to inspect web elements that we access besides using keyboard shortcuts.

Returning to the title of this post, here is a simple way that you can implement into a system or web application that can at least minimize inspect elements on your web pages.


<script>
    $(document).ready(function() {

        // DISABLE RIGHT CLICK
        $(document).on({
            "contextmenu": function(e) {
                console.log("ctx menu button:", e.which); 
                // Stop the context menu
                e.preventDefault();
            },
            "mousedown": function(e) { 
                console.log("normal mouse down:", e.which); 
            },
            "mouseup": function(e) { 
                console.log("normal mouse up:", e.which); 
            }
        });

        // DISABLE SHORTCUTS
        document.onkeydown = function(e) {
            if(event.keyCode == 123) {
                return false;
            }
            if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) {
                return false;
            }
            if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) {
                return false;
            }
            if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) {
                return false;
            }
            if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) {
                return false;
            }
        }
    }); 
</script>

To use the above code, you need an additional JQuery library. If there are suggestions or comments in this article, don’t hesitate to give feedback. Thank you, Happy Coding!