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

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