Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

devtools-detect

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

266

Version

3.0.0

License

MIT

Unpacked Size

4.87 kB

Total Files

5

Last publish

Collaborators

  • avatar