how to close browsers dev console using javascript?

Question

we can open browsers dev console using:

F12, Ctrl+Shift+C , Ctrl+Shift+I and ...

i have prevented from right click and those keys using this code:

    document.addEventListener('contextmenu', function(e) {
        e.preventDefault();
    });

    document.onkeydown = function(e) {
        if(event.keyCode == 123) {
            console.log('You cannot inspect Element');
            return false;
        }
        if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) {
            console.log('You cannot inspect Element');
            return false;
        }
        if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) {
            console.log('You cannot inspect Element');
            return false;
        }
        if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) {
            console.log('You cannot inspect Element');
            return false;
        }
        if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) {
            console.log('You cannot inspect Element');
            return false;
        }
    }
    // prevents right clicking
    document.addEventListener('contextmenu', e => e.preventDefault());

now imagine the dev console is already opened and our page is loading after it, i want to close this dev console windows using programmatically with javascript, when the page is loaded. is this possible??

Answer 1

I think that it is quite impossible to block the developer console, even if using the method you proposed, a user can just use chromium and re-map the developer console hotkey to open that. Hell, even a Facebook engineer had tried to do it in the Facebook site but gave up.

My suggestion is to add a warning message in the console and warn the user not to type anything in it, which is what the big sites are also doing. Or you can be extreme and do console = null, as most of the injection scripts contain more or less a console.log and this will break their scripts, the downside is you also can't do console.log on production site unless you manually inject back the console.

Answer 2

I don't think it would be possible since you would be modifying the browser's behavior, which it won't let you do obviously. However, I am not 100% certain of this, I'm assuming it would be a security flaw to let a website modify the browser's behavior without being authorized to.

Even if it was possible, there are many ways that someone could circumvent this, such as disabling javascript or injecting a script on his end to remove your event listeners, giving him access to the DevTools.

Addionnaly, if you're trying to prevent someone from seeing your HTML source (from what I can see in the snippet you posted), someone could just download the source with a simple GET request and look at it with his own tools.

In summary, once it ends up on someone else's browser, there's virtually anything they can do with what you have given them. That is why frontends should not be considered as your only layer of "security". You can give the users a hard time to do what you do not want them to do, but you can never prevent them to the full extent.