I have disabled Google chrome developer tools on website. However one can still access it using below methods,

1. Open another website say www.google
2. Press F12 -> Developer console will open
3. Visit my website -> Bingo chrome developer tools are now able to play with my website.

How can I disable this behavior ? How can I close Google chrome developer console if it is already open ?

I have disabled Google chrome developer tools on website. However one can still access it using below methods,

1. Open another website say www.google.com
2. Press F12 -> Developer console will open
3. Visit my website -> Bingo chrome developer tools are now able to play with my website.

How can I disable this behavior ? How can I close Google chrome developer console if it is already open ?

• javascript
• google-chrome
• security
• web
• google-chrome-devtools

• 2 What is purpose of closing developer tools? – guest271314 Commented Aug 31, 2016 at 20:33
• One use case could be if we are hiding some buttons, links due to to user access settings. If that element is present in DOM user can simply go ahead and enable that link. Which we want to prevent. – Amit Commented Sep 1, 2016 at 7:09
• 2 You can exclude elements from initially being loaded into document, then request, append elements to document when user settings allow access to elements – guest271314 Commented Sep 1, 2016 at 7:21
• 1 @aProgrammer If an unauthorized user can load any page they are not meant to, then you clearly have flaw in whatever system you have for permissions. You can easily declare a rank for a user and then require all users accessing a certain page to be above that rank, if they are not the page simply outputs an error and does not execute any request. Regardless if they enable the link or not- you will be protected. – BinaryEvolved Commented Sep 2, 2016 at 22:08
• 1 Never trust the user. So don't do permission handling on the client side, do it on the server side e.g. by AJAX requests. – Frederic Klein Commented Sep 4, 2016 at 16:58

4 Answers 4

There is no reliable way to prevent a client from modifying, or viewing any data sent to their browser.

I can't find a proper reason to ever want, or need to disable tools such as the F12 Developer tools in chrome. Nor would there ever be a way to perform such an operation so long as you are sending data.

Let's assume through some bug in Chrome, or by using javascript- you are able to disable access to the developer tools. That's great! But what prevents a user, malicious or not, from making a cURL request to your website and just saving the HTML for editing and viewing later? Nothing!

Practices you should follow instead of in-effectively preventing access to developer tools:

1. Assume that all data sent to a client, at any time, is being saved indefinitely. This also means that at any time the client may view the source data for your website, for all versions of your website that have ever existed. Never send anything sensitive that may be used later even after the client loses authenticated access.
2. Assume that a client may be using a browser that doesn't follow regulations. The browser may not execute or interpret your javascript, or may even modify it before final presentation to an end user. You should develop your website for compliant browsers, while at the same time understanding that you can't trust the client's javascript to determine if a user should be authenticated to a page or not, that kind of handling needs to occur server side.
3. Ensure all pages of your website display the proper copyright and licensing terms. If your worry is theft of all your hard work: While it can be annoying to have a random user steal your website's design after hours of work on it. They are likely going to have little impact on your project. However, clearly stated licensing and copyright prevents anyone working for a company or school project for using your work with or without credit (depending on the licensing).

Even if someone is able to modify the source code for your website.. So what? It shouldn't matter assuming you follow the proper practices and guidelines. Authentication and logic is all handled on the server side of things, and javascript/html should only be used to enhance the user's experince- not perform critical logic or data interactions.

As per my knowledge this isn't possible

and is best avoided anyway. Even if a solution can be found, bear in mind that most browsers these days allow the user to prevent Javascript from interfering with their browser settings and window chrome, even when using window.open. So you've got absolutely no way of guarenteeing the behaviour that you're looking for.

But yes you can prevent F12 key using trick It might be helpful to you..

window.oncontextmenu = function () {
   return false;
}
document.onkeydown = function (e) { 
    if (window.event.keyCode == 123 ||  e.button==2)    
    return false;
}

I just tested this and its working for me ... http://output.jsbin.com/vayukuqubo

Its just disable disable rightclick & F12 on your page, but there is no way to stop a user from opening Dev Tools Menu > Tools > Developer tools

In fact You should never disable control of the tools which are at client side, to make your website/data secure.

You can not prevent user to open the developer console from one or other way but there is a way to prevent user doing malicious activities/play with your website (terribly bad thing but possible). You can refer this question for the detailed understanding and solution.

The only reasonable way to protect your data is to write secure code on server side and remember that if you allow someone to download some data, he can do with it whatever he wants.

The best i can do is see if the user is in dev tools. Here is my code:

<!DOCTYPE html>
<html>
    <body>
        <pre id="output"></pre>
        <script type="text/javascript">
            var element = new Image;
            var devtoolsOpen = false;
            element.__defineGetter__("id", function() {
                devtoolsOpen = true; // This only executes when devtools is open.
            });
            setInterval(function() {
                devtoolsOpen = false;
                console.log(element);
                if (devtoolsOpen == true) {
                    // run code if dev tool are open
                } // else here if you like to see if dev tools are not open
            }, 1000);
        </script>
    </body>
</html>

Every second it will say if the user has dev tools open or not.