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.

This package has a lot of flaws. It used to work better, but browsers changed, and the detection now has too many false-positives.

Demo

Install

npm install devtools-detect

Usage

React usage

import {useState, useEffect} from 'react';
import devtoolsDetect from 'devtools-detect';

export function useDevToolsStatus() {
	const [isDevToolsOpen, setIsDevToolsOpen] = useState(devtoolsDetect.isOpen);

	useEffect(() =&gt; {
		const handleChange = event =&gt; {
			setIsDevToolsOpen(event.detail.isOpen);
		};

		window.addEventListener('devtoolschange', handleChange);

		return () =&gt; {
			window.removeEventListener('devtoolschange', handleChange);
		};
	}, []);

	return isDevToolsOpen;
}

import {useDevToolsStatus} from './useDevToolsStatus.js';

export default function App() {
	const isDevToolsOpen = useDevToolsStatus();
	return isDevToolsOpen ? 'OPEN' : 'CLOSED';
}

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.

Most popular functions for devtools-detect

To help you get started, we’ve selected a few devtools-detect examples, based on popular ways it is used in public projects.

devtools-detect.open