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:
- General elements:
#E63946 - Body children:
#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
To build the extension from source:
- Clone this repository
- Install dependencies:
npm install
- Build the extension:
npm run build
This will create:
- A minified
css-debug.jsfile - An
extension.zipfile ready for distribution
The extension requires the following permissions:
activeTab: To modify the current tab's stylingscripting: To inject the debug scriptsstorage: To persist debug state per tab
This project is released under the MIT License.