You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
webshunter 7add8cd235 first commit 1 month ago
..
index.d.ts first commit 1 month ago
index.js first commit 1 month ago
license first commit 1 month ago
package.json first commit 1 month ago
readme.md first commit 1 month ago

readme.md

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 type="module">
	import devtools from './node_modules/devtools-detect/index.js';

	// Check if it's open
	console.log('Is DevTools open:', devtools.isOpen);

	// Check it's orientation, `undefined` if not open
	console.log('DevTools orientation:', 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.