Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?


1 Answers

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>
like image 194
liakoyras Avatar answered Sep 05 '25 03:09

liakoyras