Skip to content

ptcong/devtools-detector

This branch is 49 commits behind AEPKILL/devtools-detector:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

a76d66b · Sep 9, 2021
May 8, 2021
May 8, 2021
Sep 9, 2021
Jan 25, 2018
Jan 27, 2018
Jan 25, 2018
Dec 28, 2020
May 8, 2021
Jul 7, 2021
Jul 7, 2021
Jan 25, 2019
Jan 23, 2019
Mar 30, 2018

Repository files navigation

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

<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

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

Packages

No packages published

Languages

  • TypeScript 57.9%
  • JavaScript 31.0%
  • HTML 11.1%