A lightweight Chrome extension that helps developers visualize and debug CSS layouts by adding colorful outlines to HTML elements. This tool makes it easy to identify and inspect element boundaries, margins, and nested structures with a simple click.
Available in the Chrome Web Store
See the extension in action:
Example of CSS Debugger highlighting different HTML elements
Visualization of ::before and ::after pseudo-elements
- 🎨 Colorful outline visualization for different HTML elements
- 🔍 Instant toggle with extension icon click
- 🎯 Support for common HTML elements including divs, sections, forms, and more
- 👻 Highlights pseudo-elements (::before and ::after)
- 🚀 Zero configuration required
The extension uses the following color scheme for different HTML elements:
- All other elements:
#2A9D8F - Div elements:
#457B9D - Article elements:
#9B5DE5 - Section elements:
#00BCD4 - Navigation:
#F4A261 - Header:
#FF7043 - Footer:
#4CAF50 - Main content:
#7B1FA2 - Aside elements:
#FF4081 - Forms:
#009688 - Lists (ul/ol):
#5C6BC0 - List items:
#FF8A65 - Paragraphs:
#66BB6A - Links:
#FFB74D - Images:
#4DD0E1 - Form elements:
#EC407A
- Download the latest
extension.zipfrom the releases - Unzip the file
- Open Chrome and navigate to
chrome://extensions/ - Enable "Developer mode" in the top right corner
- Click "Load unpacked" and select the unzipped folder
- Click the CSS Debugger icon in your Chrome toolbar to toggle the debug view
- The extension will add colored outlines to all elements on the page
- Click the icon again to disable the debug view
There is no build step. Clone the repository and load the folder unpacked at
chrome://extensions/ — app.js is the source Chrome runs.
To package a extension.zip for the Chrome Web Store:
bun run buildThe extension requires the following permissions:
activeTab: To modify the current tab's stylingscripting: To inject the debug scripts
This project is released under the MIT License.