English (UK)
See more
Chrome extension for highlighting DOM elements to better debug layout issues
Latest Version
Version
1.7
Update
April 19, 2022
Size
251KiB
Developer
Category
Users
917 
Rating
4 ★
Manifest Version
2
Web Store Status
Extension ID
Languages Support
Permissions
ActiveTab
See more
Layout Debugger Extension
- Identifying too-wide overflowing objects.
- Distinguishing block from inline elements.
- Helping to keep track of element alignment.
Adds a distinct colour outline to each visible DOM element, as well as providing a visual prompt for overflowing divs.
display: block; => blue;
display: inline; => purple;
overflowing the viewport => red!
etc..
Read more
- Distinguishing block from inline elements.
- Helping to keep track of element alignment.
Adds a distinct colour outline to each visible DOM element, as well as providing a visual prompt for overflowing divs.
display: block; => blue;
display: inline; => purple;
overflowing the viewport => red!
etc..
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "Layout Debugger", "short_name": "Layout Debugger", "description": "Chrome extension for highlighting DOM elements to better debug layout issues", "version": "1.7", "author": "Chris Snowden", "icons": { "19": "images/icon19dark.png", "38": "images/icon38dark.png", "128": "images/icon128dark.png" }, "browser_action": { "default_icon": { "19": "images/icon19dark.png", "38": "images/icon38dark.png" }, "default_title": "Toggle highlighter" }, "background": { "scripts": ["background.js"], "persistent": false }, "content_scripts": [{ "matches": [""], "js": ["highlight.js"] }], "permissions": [ "activeTab" ], "web_accessible_resources": [ "*.png", "highlight.js" ]}
Read more
Similar Extensions
Outliner CSS 917 11 ★ 13.01KiB
Debug CSS 917 35 ★ 19.06KiB
HTML5 Debugger 917 1 ★ 9.01KiB
DevTools Classes & Atributes panel 917 4 ★ 12.75KiB
Div Highlighter 917 7 ★ 5.47KiB
HTML Hierarchy Visualizer 917 8 ★ 21.62KiB
Div Density 917 6 ★ 6.95KiB
simple-debug.css 917 14 ★ 9.15KiB
Looksee 917 3 ★ 45.51KiB
HTML Visual Validation 917 8 ★ 54.54KiB
Outliner 917 3 ★ 15.99KiB
DOM Highlighter 917 4 ★ 52.1KiB
Css Playground and Dom Tree 917 2 ★ 179KiB
DOM X-Ray 917 2 ★ 57.82KiB
HTML & CSS Design Analysis 917 0 ★ 1.47MiB
showHTML 917 2 ★ 12.59KiB
DOM to JSON Converter 917 1 ★ 18.23KiB
Domkit 917 2 ★ 121KiB
Pesticide for Chrome (without hover bar) 917 44 ★ 23.33KiB
HTML DOM Navigation 917 18 ★ 13.89KiB
Scripter debugger extension 917 2 ★ 1.04MiB
MageTools: DevTools Reimagined 917 9 ★ 84.8KiB
DOM node tree viewer. 917 4 ★ 281KiB
Dimensions Inspect | Gridman 917 87 ★ 816KiB
User reviews
Zen Imtiaz (ID: 000000134f5760fc) Voted 2 ★ - Updated 10/23/2021
Stas Klevtsov (ID: 000000295415a73f) Voted 5 ★ - Updated 06/16/2017
