detect-devtools
v1.0.7
Published
   => {
console.log(`DevTools ${isOpen ? 'opened' : 'closed'}`);
console.log(`Detection method: ${type}`);
console.log(`Additional details:`, detail);
});
HTML Example
Check /dist/example.html
Live example: https://vehbiu.github.io/detect-devtools/dist/example.html
🛠️ Detection Strategies
The library uses multiple strategies to detect DevTools:
- Object ID Check: Monitors changes in object properties
- Performance Logging: Analyzes console.log performance
- Debug Check: Checks for debug-related behaviors
- ToString Check: Evaluates function.toString() behavior
📁 Project Structure
src/
├── checks/
│ ├── impl/
│ │ └── [...checkName].ts
│ └── BaseCheck.ts
├── util/
├── index.ts
└── tsconfig.json
⚙️ API Reference
init(onChange?: OnChangeProps)
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;
🤝 Contributing
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
📝 License
This project is licensed under the MIT License - see the LICENSE file for details.
👤 Author
Vehbi
- GitHub: @vehbiu
🙏 Acknowledgments
- Inspired by various DevTools detection techniques
- Lots of techniques improved from:
- https://github.com/sindresorhus/devtools-detect/
Made with ❤️ for the developer community