A lightweight, modular library for detecting when browser developer tools are opened, using multiple detection strategies.
- Multiple Detection Methods: Uses various strategies to detect DevTools opening
- Modular Architecture: Easy to add or remove detection strategies
- TypeScript Support: Fully typed for better development experience
- Customizable Callbacks: Define custom actions when DevTools state changes
- Minimal Dependencies: Pure JavaScript/TypeScript implementation
npm install --save detect-devtoolsimport { init } from 'detect-devtools';
// Initialize with a callback function
init((isOpen, type, detail) => {
console.log(`DevTools ${isOpen ? 'opened' : 'closed'}`);
console.log(`Detection method: ${type}`);
console.log(`Additional details:`, detail);
});Check /dist/example.html
Live example: https://vehbiu.github.io/detect-devtools/dist/example.html
The library uses multiple strategies to detect DevTools:
- Object ID Check: Monitors changes in object properties
- Performance Logging: Analyzes console.l 7FF6 og performance
- Debug Check: Checks for debug-related behaviors
- ToString Check: Evaluates function.toString() behavior
src/
├── checks/
│ ├── impl/
│ │ └── [...checkName].ts
│ └── BaseCheck.ts
├── util/
├── index.ts
└── tsconfig.json
Initializes the detection system with an optional callback function.
type OnChangeProps = (
open: boolean, // true if DevTools is open
type: string, // detection method that triggered
detail: object | string | null // additional information
) => void;Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature - Make your changes
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
Vehbi
- GitHub: @vehbiu
- Inspired by various DevTools detection techniques
- Lots of techniques improved from:
Made with ❤️ for the developer community