Css Debugger Chrome extension icon

Css Debugger

👥 547 users
📦 v1.0
💾 8.06KiB
📅 2025-03-10
View on Chrome Web Store

Chrome will indicate if you already have this installed.

Overview

This extension, 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.

It functions similarly to the old Pesticide extension but is compatible with Manifest V3. The source code contains no third-party dependencies.

🌐 Open source repository: https://github.com/aydgn/css-debugger-extension

Tags

Productivity/developer developer design productivity/developer

Privacy Practices

Not being sold to third parties, outside of the approved use cases
Not being used or transferred for purposes that are unrelated to the item's core functionality
Not being used or transferred to determine creditworthiness or for lending purposes

🔐 Security Analysis

This extension hasn't been security-scanned yet.

Capture a screenshot of your current page in entirety and reliably—without requesting any extra permissions!
Productivity/developer AI
브라우저에서 라온시큐어의 PC보안 기능을 사용하기 위한 확장 프로그램입니다.
Productivity/developer
Adds React debugging tools to the Chrome Developer Tools. Created from revision 3cde211b0c on 10/20/2025.
Productivity/developer