Debug CSS

Adds outline to all elements on the page to show the culprit element which is changing desired layout

Debug CSS: Chrome Extension for Easy Web Page Development

Debug CSS is a Chrome extension designed to streamline web page development. The extension outlines every element on the page, helping developers identify which elements affect others. It lends different colors to different elements and displays element information alongside values. Debug CSS allows easy toggling and supports keyboard shortcuts. It is an incredibly useful tool for web developers dealing with intricate layouts.
Install from Chrome Web Store

Extension stats

Users: 20,000+
Rating: 4.74
(35)
Version: 1.0 (Last updated: 2018-09-12)
Creation date: 2018-09-12
Risk impact: Very low risk impact
Risk likelihood:
Manifest version: 2
Permissions:
  • activeTab
Size: 19.52K

Other platforms

Not available on Android
Debug CSS (v1.1resigned1)
4.73 (11) 1,368+
Debug CSS (v1.0)
4.60 (7) 9,734+
Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Debug CSS

A lightweight extension for Google chrome to show outline of all the element exist on page.

while working on web page development the one of the difficult part is to position the element as required and check which element affecting the other one.

This chrome extension allows user to see outline on every element of the page. Hold the keyboard Ctrl button and hover element it will show the element details along with the value.


Usage

Post installation simply click on the extension icon to turn it On or Off.

If you are a keyboard shortcut lover like me simply hit Alt+Shift+C key to toggle the extension.

See more

User reviews

These summaries are automatically generated weekly using AI based on recent user reviews. Chrome Web Store does not verify user reviews, so some user reviews may be inaccurate, spammy, or outdated.
Pros
  • Very useful and interactive
  • Works perfectly on Google Chrome
  • Great alternative to Pesticide
  • Reduces manual effort and helps understand CSS better
Cons
  • Doesn't work on Mac, or has limited functionality
  • Hover effect not working for some users
  • Developer mode required but still doesn't work on local sites
Most mentioned
  • Very useful
  • Doesn't work on Mac
  • Hover effect issues
  • Instructions for usage needed
User reviews
Superb, works like a charm
by Arthur Marchand, 2024-11-03

The extension is great. But it would be even better if the dimensions of each box is shown on top of the boxes.
by Bhupen Pal, 2024-09-21

Works but if you aren't seeing the black bar at the bottom telling you what you're hovering on you have to inspect and under styles in the tools uncheck the visibility css attribute. For whatever reason it is defaulted to hidden. Very dumb.
by Speedx77x2, 2024-07-23
View all user reviews

Extension safety

Risk impact

Debug CSS does not require any sensitive permissions.

Risk likelihood

Debug CSS has earned a fairly good reputation and likely can be trusted.

Upgrade to see risk analysis details

Promo images

Debug CSS small promo image
Small promo image

Similar extensions

Here are some Chrome extensions that are similar to Debug CSS: