English (United States)
See more
Adds outline to all elements on the page to show the culprit element which is changing desired layout
Latest Version
Version
1.0
Update
September 12, 2018
Size
19.06KiB
Developer
Category
Users
20,000+ 
Rating
4.74286 ★
Manifest Version
2
Web Store Status
Extension ID
Languages Support
Permissions
ActiveTab
See more
Debug CSS Extension
# 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
`
* {
\toutline: 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)
Read more
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
`
* {
\toutline: 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)
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "Debug CSS", "short_name": "Debug CSS by Pranay Joshi", "description": "Adds outline to all elements on the page to show the culprit element which is changing desired layout", "version": "1.0", "permissions": [ "activeTab" ], "background": { "scripts": ["debug-CSS.js"], "persistent": false }, "browser_action": { "default_title": "Toggle Debug CSS", "default_icon": { "19": "images/toolbar-chrome.png", "38": "images/[email protected]" } }, "commands": { "toggle-pin": { "suggested_key": { "default": "Alt+Shift+C" }, "description": "Toggle Debug CSS" } }, "icons": { "128": "icon_128.png", "16": "icon_16.png", "48": "icon_48.png" }, "web_accessible_resources": [ "debugCSS.min.css", "debugCSS.js" ]}
Read more
Similar Extensions
CSS Peeper 20,000+ 363 ★ 279KiB
CSSViewer 20,000+ 371 ★ 301KiB
Outliner CSS 20,000+ 11 ★ 13.01KiB
simple-debug.css 20,000+ 14 ★ 9.15KiB
Pesticide for Chrome (without hover bar) 20,000+ 44 ★ 23.33KiB
VisBug 20,000+ 252 ★ 5.38MiB
DOM X-Ray 20,000+ 2 ★ 57.82KiB
JSON Viewer Pro 20,000+ 137 ★ 349KiB
daily.dev | The homepage developers deserve 20,000+ 2460 ★ 2.28MiB
HTML Hierarchy Visualizer 20,000+ 8 ★ 21.62KiB
HTML Visual Validation 20,000+ 8 ★ 54.54KiB
Pesticide for Chrome 20,000+ 94 ★ 24.81KiB
HTML Tree Generator 20,000+ 39 ★ 22.97KiB
Layout Debugger 20,000+ 3 ★ 251KiB
Looksee 20,000+ 3 ★ 45.51KiB
Outliner 20,000+ 3 ★ 15.99KiB
Inspect CSS 20,000+ 24 ★ 404KiB
Responsive Viewer 20,000+ 298 ★ 639KiB
Css Playground and Dom Tree 20,000+ 2 ★ 179KiB
HTML DOM Navigation 20,000+ 18 ★ 13.89KiB
CSS Scan 20,000+ 84 ★ 1.41MiB
CSS Viewer for Google Chrome™ 20,000+ 334 ★ 346KiB
Amino: Live CSS Editor 20,000+ 453 ★ 1.45MiB
Dimensions Inspect | Gridman 20,000+ 87 ★ 816KiB
User reviews
Guilherme Santos (ID: 000000c449c8217b) Voted 5 ★ - Updated 03/23/2023
Chris Tian (ID: 0000006e1887c7c5) Voted 5 ★ - Updated 10/02/2022
Blair (ID: 000000a8a0ac944c) Voted 5 ★ - Updated 04/08/2022
Ronit Akhariya (ID: 0000006c42d4f2bd) Voted 4 ★ - Updated 02/01/2022
Weird stuff (ID: 000000366e3feeff) Voted 5 ★ - Updated 11/27/2021
