A Chrome extension that helps debug and visualize your webpage's structure by adding outlines to HTML elements. This project was inspired by the excellent Pesticide tool, originally created by Adam Morse.
Click the button to enable
How it looks turned on
- Instantly add outlines to all HTML elements on a page
- Toggle outlines on/off with a single click
- Customize outline colors based on element types
- Visualize nested elements and their relationships
- Debug layout issues more efficiently
- Clone this repository or download the ZIP file
- Open Chrome and navigate to
chrome://extensions/ - Enable "Developer mode" in the top right corner
- Click "Load unpacked" and select the extension directory
- Click the black CSS Outline Debugger icon in your browser toolbar
- The extension will toggle outlines on all elements of the current page
- Click again to turn off the outlines
The extension injects CSS that adds colored outlines to HTML elements, making it easier to visualize the page structure and identify layout issues.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.