Item logo image for CSS Debugger

CSS Debugger

aydogan.dev
5.0(

4 ratings

)
ExtensionDeveloper Tools179 users
Item media 2 (screenshot) for CSS Debugger
Item media 1 (screenshot) for CSS Debugger
Item media 2 (screenshot) for CSS Debugger
Item media 1 (screenshot) for CSS Debugger
Item media 1 (screenshot) for CSS Debugger
Item media 2 (screenshot) for CSS Debugger

Overview

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

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

5 out of 54 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Details

  • Version
    1.0
  • Updated
    March 10, 2025
  • Size
    8.06KiB
  • Languages
    English (United States)
  • Developer
    Website
    Email
    aydogan.gokberk@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • 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

Support

Related

UI Inspector - Visual CSS Editor

4.1(9)

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

Outline HTML Elements

5.0(4)

Outline HTML elements with a colorful border without affecting the layout to inspect website structure.

Debug CSS

4.4(46)

When enabled adds outline to all elements on the page, Hold Ctrl and hover to get more detail

Hoverify: All-in-one extension for web developers

4.1(155)

Master web development with an all-in-one browser extension that helps you inspect, edit, test, debug, and optimize websites faster.

Layout Debugger

4.0(3)

Chrome extension for highlighting DOM elements to better debug layout issues

Pesticide for Chrome (without hover bar)

4.1(47)

This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page.

CSS Debugger

0.0(0)

A CSS debugger with color picker for element borders

Debug CSS - LPTech

5.0(5)

Hỗ trợ các bạn làm lập trình frontend, hoặc QA có thể debug CSS layout 1 cách dễ dàng nhất!

Pesticide

4.2(127)

A CSS debugging tool that inserts outlines onto all elements to help with debugging layout issues

CSS Debug

5.0(1)

This extension highlights borders of html elements

Outliner CSS

5.0(12)

A totally awesome structure and layout debugger that inserts CSS outlines to all elements.

CSS Debug with Pesticide

5.0(1)

Toggle outlines on all elements to help debug CSS

UI Inspector - Visual CSS Editor

4.1(9)

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

Outline HTML Elements

5.0(4)

Outline HTML elements with a colorful border without affecting the layout to inspect website structure.

Debug CSS

4.4(46)

When enabled adds outline to all elements on the page, Hold Ctrl and hover to get more detail

Hoverify: All-in-one extension for web developers

4.1(155)

Master web development with an all-in-one browser extension that helps you inspect, edit, test, debug, and optimize websites faster.

Layout Debugger

4.0(3)

Chrome extension for highlighting DOM elements to better debug layout issues

Pesticide for Chrome (without hover bar)

4.1(47)

This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page.

CSS Debugger

0.0(0)

A CSS debugger with color picker for element borders

Debug CSS - LPTech

5.0(5)

Hỗ trợ các bạn làm lập trình frontend, hoặc QA có thể debug CSS layout 1 cách dễ dàng nhất!

Google apps