devtools-detector

Installation

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: closed';
});

// 2. Launch detection
launch();

AMD

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

<script src="node_modules/devtools-detector/lib/devtools-detector.js"></script>
<script>
  const view = document.createElement('div');
  document.body.appendChild(view);

  devtoolsDetector.addListener(function (isOpen) {
    view.innerText = isOpen
      ? 'DevTools status: open'
      : 'DevTools status: closed';
  });
  devtoolsDetector.launch();
</script>

Browser Support

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

Types & API

DevtoolsDetail

interface DevtoolsDetail {
  isOpen: boolean;
  checkerName: string;
}

Listener

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)

  // 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
• zswang/jdetects
• How to detect if browser DevTools is open in JavaScript? (Chinese)

License

MIT © AEPKILL