devtools-detector

Install

npm install devtools-detector-csp --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

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

Support

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

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 © Vasanthvivi