devtools-detector
npm install devtools-detectornpm install devtools-detector --save
javascript
import { addListener, launch } from 'devtools-detector';
const view = document.createElement('div');
document.body.appendChild(view);
// 1. Add listener
addListener((isOpen) => {
view.innerText = isOpen ? 'DevTools status: open' : 'DevTools status: closed';
});
// 2. Launch detection
launch();
`
$3
`javascript
require(['devtools-detector'], function (devtoolsDetector) {
const view = document.createElement('div');
document.body.appendChild(view);
devtoolsDetector.addListener(function (isOpen) {
view.innerText = isOpen
? 'DevTools status: open'
: 'DevTools status: closed';
});
devtoolsDetector.launch();
});
`
$3
`html
`
Browser Support
- IE9+ (requires Promise polyfill)
- Edge
- Chrome
- Firefox
- Safari
- Opera
Types & API
$3
`typescript
interface DevtoolsDetail {
isOpen: boolean;
checkerName: string;
}
`
$3
`typescript
type DevtoolsDetectorListener = (
isOpen: boolean,
detail?: DevtoolsDetail
) => void;
`
$3
- launch(): Start detection
- isLaunch(): Returns true if detection is active, false otherwise
- stop(): Stop detection
- addListener(listener: DevtoolsDetectorListener): Add a listener
- removeListener(listener: DevtoolsDetectorListener): Remove a listener
- setDetectDelay(value: number): Set detection loop delay time. If value <= 0, detection stops.
- crashBrowserCurrentTab(): Crash the current browser tab (tested only on Chrome)
`typescript
// Example: crash the current browser tab 2 seconds after DevTools is opened
import { addListener, crashBrowserCurrentTab } from 'devtools-detector';
addListener(function (isOpen) {
if (isOpen) {
setTimeout(crashBrowserCurrentTab, 2000);
}
});
`
- crashBrowser(): Crash all browser tabs (tested only on Chrome)
How it works
How it works
Caveats
1. In Firefox, if DevTools is undocked, it's only detected when switching to the Console Panel.
2. Ensure that devtools-detector` is loaded before other scripts.