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

Detect if DevTools is open and its orientation
https://github.com/sindresorhus/devtools-detect

Last synced: 3 days ago
JSON representation

Detect if DevTools is open and its orientation

• Host: GitHub
• URL: https://github.com/sindresorhus/devtools-detect
• Owner: sindresorhus
• License: mit
• Created: 2013-07-02T13:11:08.000Z (over 11 years ago)
• Default Branch: main
• Last Pushed: 2024-04-23T14:56:36.000Z (8 months ago)
• Last Synced: 2024-10-29T15:34:15.928Z (about 2 months ago)
• Language: HTML
• Homepage: https://sindresorhus.com/devtools-detect
• Size: 30.3 KB
• Stars: 2,069
• Watchers: 40
• Forks: 220
• Open Issues: 23
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

• awesome - sindresorhus/devtools-detect - Detect if DevTools is open and its orientation (HTML)

README

        
# 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](https://sindresorhus.com/devtools-detect)

## Install

```sh

npm install devtools-detect

```

## Usage

```html

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

});

```

## React usage

```jsx

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;

}

```

```jsx

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.