Instantly debug CSS layouts by adding colorful outlines to HTML elements. Easily identify and inspect elements with a simple click.

Latest Version

Version
1.0
Update
February 16, 2025
Size
8.06KiB
Developer
aydogan.dev
Category
Users
0
Rating
0 ★
Manifest Version
3
Web Store Status
Languages Support
English (United States)
See more
Permissions
ActiveTab
Scripting
Storage
See more

CSS Debugger Extension

This extension, \"CSS Debugger,\" is designed to simplify CSS debugging and layout inspection. It instantly adds colorful outlines to HTML elements, making it easy to visualize and identify different elements on a webpage.

The extension solves the common problem of struggling to understand the structure and layout of a website. Instead of manually inspecting elements in the browser's developer tools, this extension provides a quick visual overview of the page's underlying structure.

When the extension's icon is clicked, it injects a script into the current tab that toggles the CSS outlines. The script uses predefined color mappings for different HTML elements, and it dynamically generates and injects CSS rules to apply the outlines.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "CSS Debugger", "version": "1.0", "description": "Instantly debug CSS layouts by adding colorful outlines to HTML elements. Easily identify and inspect elements with a simple click.", "permissions": ["activeTab", "scripting", "storage"], "action": { "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }, "background": { "service_worker": "css-debug.js" }, "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" }}
Read more

Similar Extensions

icon

GoFullPage - Full Page Screen Capture Extension · Developer Tools 0 77052 ★ 1.81MiB

icon

ColorZilla Extension · Developer Tools 0 3845 ★ 410KiB

icon

JSON Formatter Extension · Developer Tools 0 1859 ★ 19.86KiB

icon

User-Agent Switcher for Chrome Extension · Developer Tools 0 2631 ★ 132KiB

icon

Lighthouse Extension · Developer Tools 0 318 ★ 50.7KiB

icon

Similarweb - Website Traffic & SEO Checker Extension · Developer Tools 0 3255 ★ 1.19MiB

icon

SEOquake Extension · Developer Tools 0 2529 ★ 1.5MiB

icon

Clear Cache Extension · Developer Tools 0 1124 ★ 616KiB

icon

ModHeader - Modify HTTP headers Extension · Developer Tools 0 1061 ★ 676KiB

icon

SEO META in 1 CLICK Extension · Developer Tools 0 1108 ★ 462KiB

icon

Selenium IDE Extension · Developer Tools 0 286 ★ 3.96MiB

icon

Postman Interceptor Extension · Developer Tools 0 957 ★ 478KiB

icon

Stylus Extension · Developer Tools 0 1101 ★ 1.01MiB

icon

CSS Peeper Extension · Developer Tools 0 363 ★ 279KiB

icon

WhatRuns Extension · Developer Tools 0 398 ★ 290KiB

icon

Color Picker for Chrome™ Extension · Developer Tools 0 118 ★ 194KiB

icon

BuiltWith Technology Profiler Extension · Developer Tools 0 407 ★ 54.1KiB

icon

Fake Filler Extension · Developer Tools 0 752 ★ 536KiB

icon

Detailed SEO Extension Extension · Developer Tools 0 193 ★ 266KiB

icon

Responsive Viewer Extension · Developer Tools 0 298 ★ 639KiB

icon

JSON Viewer Pro Extension · Developer Tools 0 137 ★ 349KiB

icon

Requestly - Intercept, Modify & Mock HTTP Requests Extension · Developer Tools 0 1227 ★ 876KiB

icon

Grepper Extension · Developer Tools 0 405 ★ 1.41MiB

icon

Color Tab Extension · Developer Tools 0 1395 ★ 11.21KiB