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

Stats

By: Pranay Joshi

View on Chrome Web Store

Users: 20,000+

Rating: 4.75 (32)

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

Stats date:

Chrome-Stats Rank

# 6305 ▲ 35

Other rankings

#2851 in Developer Tools ▼ 307 #4 in debug keyword 23 #27 in jquery keyword 16 ▼ 2 #131 in element keyword 15 ▼ 3 #131 in toggle keyword 20 ▼ 3

Other platforms

Not available on Firefox

Debug CSS (v1.0)

4.60 (7) 9,171+

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.

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

User reviews summary

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

Useful for debugging CSS
Interactive and easy to use
Good alternative to Pesticide
Works well on Windows

Cons

Doesn't work on Mac for some users
Lack of instructions for new users
Issues with hover effect

Most mentioned

Good alternative to Pesticide
Helps to understand CSS
Doesn't work on Mac

Recent reviews

I'm a Mac User. If anyone has an issue that feels not working/ hovering effect not works even Debug CSS active, You have to do a simple thing. Go to manage extension --> Turn ON "Allow access to file URLs".