Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AEPKILL/devtools-detector
Detect if DevTools is open
https://github.com/AEPKILL/devtools-detector
Last synced: 12 days ago
JSON representation
Detect if DevTools is open
- Host: GitHub
- URL: https://github.com/AEPKILL/devtools-detector
- Owner: AEPKILL
- License: mit
- Created: 2018-01-25T11:12:14.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-07-17T02:22:53.000Z (4 months ago)
- Last Synced: 2024-07-17T05:17:05.907Z (4 months ago)
- Language: TypeScript
- Homepage: https://blog.aepkill.com/demos/devtools-detector/
- Size: 358 KB
- Stars: 1,044
- Watchers: 17
- Forks: 98
- Open Issues: 4
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# devtools-detector [](https://www.npmjs.com/package/devtools-detector)
## Installation
`npm install devtools-detector --save`
## Usage
**[DEMO](http://blog.aepkill.com/demos/devtools-detector/)**
### ES6 & TypeScript
```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();
```
### AMD
```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();
});
```
### No Module System
```html
const view = document.createElement('div');
document.body.appendChild(view);
devtoolsDetector.addListener(function (isOpen) {
view.innerText = isOpen
? 'DevTools status: open'
: 'DevTools status: closed';
});
devtoolsDetector.launch();
```
## Browser Support
- IE9+ (requires Promise polyfill)
- Edge
- Chrome
- Firefox
- Safari
- Opera
## Types & API
### DevtoolsDetail
```typescript
interface DevtoolsDetail {
isOpen: boolean;
checkerName: string;
}
```
### Listener
```typescript
type DevtoolsDetectorListener = (
isOpen: boolean,
detail?: DevtoolsDetail
) => void;
```
### Methods
- `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)
## 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.
## References
- [sindresorhus/**devtools-detect**](https://github.com/sindresorhus/devtools-detect)
- [zswang/**jdetects**](https://github.com/zswang/jdetects)
- [How to detect if browser DevTools is open in JavaScript?](https://www.zhihu.com/question/24188524) (Chinese)
## License
MIT © [AEPKILL](mailto:[email protected])
```
```