devtools-detector 

Install

npm install devtools-detector-csp --save

Usage

DEMO

$3

``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: close')
);
// 2. launch detect
launch();
`

$3

`javascript
require(['devtools-detector'], function(devtoolsDetector) {
var view = document.createElement('div');
document.body.appendChild(view);

devtoolsDetector.addListener(function(isOpen) {
view.innerText = isOpen
? 'devtools status: open'
: 'devtools status: close';
});
devtoolsDetector.launch();
});
`

$3

`html


`

Support

- IE9+ (required Promise polyfill)
- Edge
- Chrome
- Firefox
- Safari
- Opera
- CSP Support in modern browsers

Type & API

- DevtoolsDetail

`typescript
interface DevtoolsDetail {
isOpen: boolean;
checkerName: string;
}
`

- Listener

`typescript
type DevtoolsDetectorListener = (isOpen: boolean, detail?: DevtoolsDetail) => void;
`

- launch()

launch detect

- isLaunch()

if detect is launched then return true, else return false

- stop()

stop detect

- addListener(listener: DevtoolsDetectorListener)

- removeListener(listener: DevtoolsDetectorListener)

- setDetectDelay(value: number)

Set detect loop delay time, if value =< 0 then stop detecting.

Caveats

1. In Firefox, if DevTools is undocked, detected only when switching to the Console Panel.
2. Make sure devtools-detector` is the first one to load

Reference

> sindresorhus/devtools-detect
>
> zswang/jdetects
>
> 前端开发中如何在 JS 文件中检测用户浏览器是否打开了调试面板

License

MIT © Vasanthvivi