Debug CSS icon

Debug CSS

by Joshi Enterprises · Developer Tools
Manifest V3 Free
View in Chrome Web Store Data as of 15 Oct 2026

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

Users
10K
0 in 30 days
Rating
4.5 / 5
unchanged in 30 days
Ratings
48
0 in 30 days
Store rank
#7,998
#6,794 among extensions
Version
1.5.12
updated 14 Mar 2025

Users

monthly, 3 years
3,00012K20KAug 2023Apr 2025Oct 2026
Latest, 15 Oct 2026: 10,000 usersMove the mouse over the chart for any month

Ratings count

monthly, 3 years
102948Aug 2023Apr 2025Oct 2026
Latest, 15 Oct 2026: 48 ratingsMove the mouse over the chart for any month

The Chrome Web Store rounds user counts down to the leading digit, so the user line moves in steps. The ratings count is exact and is the better signal of real adoption.

About Debug CSS

# Release notes In the latest version we have addressed the issue where the extension stopped working after mandatory `manifest_version upgrage` from Google. also, we have addressed the issue in which user were unable to see the styling for the bottom most element of the page. we have added tooltip feature which gives a basic styles in tooltip itself. # 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. ---------- # How it works? This extension works on CSS outline attribute: add the below code snippet in any CSS of a web page ` * { outline: 1px solid red; }` The extension does the same the only thing is; it gives different color to different element(s) while the code snippet adds red outline to every element. ---------- # Other work and repository [A lightweight customizable plugin for jQuery to show horizontal length in form of vertical progress bar.](https://github.com/pranayjoshicse/VerLim.js) [listed on jqueryscript.net](https://www.jqueryscript.net/other/Simple-Custom-Reading-Indicator-with-jQuery-VerLim-js.html) [Demo](https://www.jqueryscript.net/demo/Simple-Custom-Reading-Indicator-with-jQuery-VerLim-js/) ---------- # More about me [twitter.](https://twitter.com/pranayjoshicse) [about me.](https://about.me/pranayjoshi)

Growth

WindowUsersChangeRatingsRating
7 days0+0.0%00.00
30 days0+0.0%00.00
6 months0+0.0%+2+0.03
1 year0+0.0%+2+0.03

Chrome Web Store search rankings

Where Debug CSS appears when people search the store, with the 30 day change
Search phrasePosition30 days
debug#4+1
jquery#70

Version history

3 versions recorded
1.5.1214 Mar 2025
1.218 Feb 2025
1.012 Sep 2018

Details

Category
Developer Tools
First seen
12 Sep 2018
Size
18 KB
Languages
en-US
Pricing
Free
Extension ID
igiofjnckcagmjgdoaakafngegecjnkj

Permissions and risk

Low riskimpact 2, likelihood 1
Permissions
activeTabscripting

Alternatives to Debug CSS

Extensions that rank for the same store searches or share the Developer Tools category, ordered by users