Debug CSS

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

What is Debug CSS?

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.

Download

Extension stats

By: Pranay Joshi

View on Chrome Web Store

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: Low risk likelihood

Manifest version: 2

Permissions:

activeTab

Size: 19.52K

Email: pr*****@gmail.com

Ranking

# 6573 ▼ 20

Other rankings

#2850 in Developer Tools #2 in debug keyword 15 ▼ 1 #24 in jquery keyword 14 ▼ 1 #137 in toggle keyword 24 ▼ 4 #151 in element keyword 20 ▼ 2

Other platforms

Debug CSS (v1.1resigned1)

4.73

(11) 1,334+

Debug CSS (v1.0)

4.60

(7) 9,737+

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

Analyze keywords

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.

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

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.

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.