Need help with devtools-detector?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

AEPKILL
396 Stars 34 Forks MIT License 124 Commits 3 Opened issues

Description

Detect if DevTools is open

Services available

!
?

Need anything else?

Contributors list

# 292,389
React
Shell
reactjs
wechat-...
100 commits
# 821
GitHub
rust-la...
wechat-...
query-l...
1 commit
# 4,195
JavaScr...
hexo
lodash
hugo
1 commit

devtools-detector devtools-detector

Install

npm install devtools-detector --save

Usage

DEMO

ES6 & TypeScript

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

AMD

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

No Module System

Support

  • IE9+ (required Promise polyfill)
  • Edge
  • Chrome
  • Firefox
  • Safari
  • Opera

Type & API

  • DevtoolsDetail
interface DevtoolsDetail {
  isOpen: boolean;
  checkerName: string;
}
  • Listener
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 © AEPKILL

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.