npm install devtools-detector --save

DEMO

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

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

<script src="node_modules/devtools-detector/lib/devtools-detector.js"></script> <script> var view = document.createElement('div'); document.body.appendChild(view); devtoolsDetector.addListener(function(isOpen) { view.innerText = isOpen ? 'devtools status: open' : 'devtools status: close'; }); devtoolsDetector.launch(); </script>

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

• 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.

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

sindresorhus/devtools-detect

zswang/jdetects

前端开发中如何在 JS 文件中检测用户浏览器是否打开了调试面板

MIT © AEPKILL