devtools-guard

v1.1.3

Published

8 months ago

A lightweight JavaScript library to detect and guard if browser DevTools are open, with customizable actions, framework support, and multiple detection strategies.

0High
0Medium
0Low

dicksonpal21

devtools detector guard browser debugger anti-debug security frontend tamper-detection

🚀 Features (v1.1.3)

🔍 Detect when browser DevTools are open
🕵️‍♂️ Multiple detection strategies:
- Window size inspection
- Console trap timing
- debugger statement trap
- Function.prototype.toString tampering
⚡ Debounced detection to reduce false positives
📣 onOpen and onClose event handlers
⚙️ Configurable interval and detection strategies
📦 Lightweight, framework-agnostic
🧪 TypeScript support built-in

📦 Installation

npm install devtools-guard
# or
yarn add devtools-guard

✨ Usage

import { startDevtoolsDetector } from "devtools-guard"

startDevtoolsDetector({
  onOpen: ({ detectedBy }) => {
    alert(`DevTools is open! Detected via: ${detectedBy.join(", ")}`)
  },
  onClose: () => {
    console.log("DevTools closed ✅")
  },
  methods: ["dimensions", "console", "debugger", "toString"], // default: all
  interval: 500,
  debounceMs: 1000,
})

✅ Usage Notes

The console and debugger methods are browser-dependent and timing-sensitive.
You can selectively disable methods like:

startDevtoolsDetector({ methods: ["dimensions", "debugger"] })

🧪 Example (HTML)

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import { startDevtoolsDetector } from "https://unpkg.com/devtools-guard?module"

      startDevtoolsDetector({
        onOpen: ({ detectedBy }) =>
          alert(`DevTools detected via: ${detectedBy.join(", ")}`),
        onClose: () => console.log("DevTools closed."),
      })
    </script>
  </head>
  <body>
    <h1>DevTools Detection Example</h1>
  </body>
</html>

⚙️ API

`startDevtoolsDetector(options)`

| Option | Type | Description | | ------------ | -------------------------------- | ---------------------------------------------------------------------------- | | onOpen | (res: DetectionResult) => void | Callback when DevTools are detected. | | onClose | () => void | Callback when DevTools are closed. | | interval | number | Polling interval in ms (default: 1000). | | debounceMs | number | Delay before triggering detection again (default: 500). | | methods | string[] | Methods used for detection: dimensions, console, debugger, toString. |

🧭 Branching Strategy

master
│
├── develop
│   ├── feature/v1.1-multi-method-detection
│   ├── feature/v1.2-event-emitter-api
│   ├── feature/v1.3-framework-hooks
│   └── ...
│
└── release/v2.0.0

| Branch | Purpose | | ------------------- | ---------------------------------------------------- | | master | ✅ Stable, published version | | develop | 🚧 Active development | | feature/* | 🌱 Feature branches (e.g., feature/v1.2-event-api) | | release/* | 🚀 Final staging for major version releases | | hotfix/* (opt.) | 🛠 Urgent patches directly merged to master |

⚙️ Initial Repo Setup

# Create develop from master
git checkout master
git checkout -b develop

# Start your first feature branch
git checkout -b feature/v1.1-multi-method-detection develop

🛣️ Roadmap Highlights

| Version | Highlights | | -------- | -------------------------------------------------------------- | | v1.1.0 | ✅ Multi-method detection, debounce, strategy config | | v1.2.0 | 🔌 EventEmitter support, on('open'), off(), etc. | | v1.3.0 | 🔧 React/Vue/Svelte composables/hooks | | v2.0.0 | 🧱 Obfuscation resistance, headless detection, multiple builds | | v2.1.0 | 📈 Analytics dashboard (optional, opt-in) |

See full roadmap → ROADMAP.md

💡 Use Cases

Prevent cheating in browser-based games
Detect inspection attempts in client-side SaaS/web apps
Log or alert when sensitive code is at risk
Automatically logout users or restrict actions
In future: detect headless automation environments

📁 Project Structure

devtools-guard/
├── src/                # Core detection logic
├── dist/               # ESM and UMD bundles
├── examples/           # Live HTML demos
├── tests/              # Unit tests (WIP)
├── README.md
├── ROADMAP.md
├── LICENSE
└── package.json

🧑‍💻 Contributing

Pull requests, issues, and feedback are welcome!

Fork this repo
Create your feature branch (git checkout -b feature/something)
Commit your changes (git commit -m 'feat: add something')
Push and open a PR 🎉

📃 License

📣 Feedback

Have ideas or feedback? Open an issue or reach out—let's make DevTools detection better for everyone.