Wondering what’s next for npm?Check out our public roadmap! »

    devtools-detect
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.1 • Public • Published

    devtools-detect

    Detect if DevTools is open and its orientation

    Useful for when you want something special to happen when DevTools is open. Like pausing canvas, adding style debug info, etc.

    Demo

    Install

    $ npm install devtools-detect
    

    Usage

    <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> 

    Support

    • Chrome DevTools
    • Safari DevTools
    • Firefox DevTools
    • Opera DevTools

    Caveats

    Doesn't work if DevTools is undocked and will show false positive if you toggle any kind of sidebar.

    License

    MIT © Sindre Sorhus

    Install

    npm i devtools-detect

    DownloadsWeekly Downloads

    853

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    4.97 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar