DOCSEARCHbyAlgolia
Submit Docs

devtools-detect

repository·main·Indexed 24 days ago

https://github.com/sindresorhus/devtools-detect

A utility for detecting whether browser DevTools are open and determining their orientation. It provides a devtools object with isOpen and orientation properties, and dispatches a devtoolschange event on the window/globalThis object when the state changes.

Tokens
1K
Snippets
3
Records
6
Agent score
30%

What's inside devtools-detect

  2. Known limitations and caveats of devtools-detect

    main

    Be aware of the following limitations when using this package:

    • Undocked DevTools: Detection does not work if DevTools is undocked (running in a separate window).
    • False Positives: The package may trigger false positives if you toggle any kind of sidebar in the browser.
    • Browser Changes: Due to changes in how browsers handle DevTools, detection may include false positives.

  3. Use devtools-detect in React

    main

    To use DevTools detection in React, create a custom hook that listens to the devtoolschange event and updates local state. This allows your components to reactively render based on whether DevTools is open.

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

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

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

		window.addEventListener('devtoolschange', handleChange);

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

	return isDevToolsOpen;
}

  4. Use devtools-detect in JavaScript

    main

    Import devtools to check the current state of DevTools or listen for changes via the devtoolschange event on the window object.

    • devtools.isOpen: A boolean indicating if DevTools is open.
    • devtools.orientation: The orientation of DevTools (undefined if not open).
    • devtoolschange event: Dispatched on window when DevTools is opened, closed, or changes orientation. The event detail contains { isOpen, orientation }.
    <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>

  5. Detect if DevTools is open using the devtools object

    main

    The default export is a devtools object that provides real-time information about the state of the browser's developer tools. You can check devtools.isOpen to see if the tools are currently open and devtools.orientation to see if they are docked 'horizontal' or 'vertical'.

    Note that the library automatically polls for changes every 500ms.

  6. Listen for devtoolschange events

    main

    The library dispatches a devtoolschange event on the globalThis object whenever the state of the developer tools changes (e.g., when they are opened or closed, or when their orientation changes).

    You can listen for this event to react to changes in real-time. The event's detail property contains an object with isOpen (boolean) and orientation ('horizontal' | 'vertical' | undefined).