Search code examples
javascriptbrowserdevtools

Is there an event triggered for opening a devtools?


As is obvious by the question title, I need a callback for an event related to opening a devtools, like

    /* I expect for something like that with var "devtools" as window's object or the instanceof an unknowed class  */

    devtools.onDevtoolsOpened = () =>
    {
        // do my stuff
    }

If it's possible, I ask for help. But if not, is there a related action or another way to fulfill my wish?


Solution

  • It really depends on each individual browser. However, I found a module that does the trick for most of the browsers: devtools-detect
    From their documentation:

    <script src="node_modules/devtools-detect/index.js"></script>
    <script type="module">
        // Check if it's open
        console.log('Is DevTools open:', window.devtools.isOpen);
    
        // Check it's orientation, `undefined` if not open
        console.log('DevTools orientation:', window.devtools.orientation);
    
        // Get notified when it's opened/closed or orientation changes
        window.addEventListener('devtoolschange', event => {
            console.log('Is DevTools open:', event.detail.isOpen);
            console.log('DevTools orientation:', event.detail.orientation);
        });
    </script>