A totally awesome structure and layout debugger that inserts CSS outlines to all elements.

Latest Version

Version
1.0.1
Update
October 10, 2017
Size
13.01KiB
Developer
Category
Users
10,000+
Rating
5 ★
Manifest Version
2
Web Store Status
Languages Support
English (United States)
See more
Permissions
ActiveTab
Storage
See more

Outliner CSS Extension

After years of adding debug styles into projects to help debug structure and layout issues I spent an afternoon making the Outliner CSS chrome extension.

Outliner CSS is added to the current page on all elements with the option to switch between RGB colors and toggle background color opacity to highlight depth.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Outliner CSS", "description": "A totally awesome structure and layout debugger that inserts CSS outlines to all elements.", "version": "1.0.1", "permissions": [ "activeTab", "storage" ], "browser_action": { "default_title": "Outliner CSS", "default_icon": "icon_19.png", "default_popup": "popup.html" }, "icons": { "128": "icon_128.png", "16": "icon_16.png", "48": "icon_48.png" }, "manifest_version": 2}
Read more

Similar Extensions

icon

DOM X-Ray Extension · Developer Tools 10,000+ 2 ★ 57.82KiB

icon

Debug CSS Extension · Developer Tools 10,000+ 35 ★ 19.06KiB

icon

Pesticide for Chrome Extension · Developer Tools 10,000+ 94 ★ 24.81KiB

icon

Outliner Extension · Developer Tools 10,000+ 3 ★ 15.99KiB

icon

Show CSS Outline Style Extension · Developer Tools 10,000+ 4 ★ 18.41KiB

icon

HTML Hierarchy Visualizer Extension · Developer Tools 10,000+ 8 ★ 21.62KiB

icon

Div Highlighter Extension · Developer Tools 10,000+ 7 ★ 5.47KiB

icon

HTML Tree Generator Extension · Developer Tools 10,000+ 39 ★ 22.97KiB

icon

Looksee Extension · Developer Tools 10,000+ 3 ★ 45.51KiB

icon

CSS Peeper Extension · Developer Tools 10,000+ 363 ★ 279KiB

icon

HTML Visual Validation Extension · Developer Tools 10,000+ 8 ★ 54.54KiB

icon

Pesticide for Chrome (without hover bar) Extension · Productivity 10,000+ 44 ★ 23.33KiB

icon

Layout Debugger Extension · Developer Tools 10,000+ 3 ★ 251KiB

icon

simple-debug.css Extension · Developer Tools 10,000+ 14 ★ 9.15KiB

icon

Domkit Extension · Developer Tools 10,000+ 2 ★ 121KiB

icon

JSON Viewer Pro Extension · Developer Tools 10,000+ 137 ★ 349KiB

icon

Outline Chrome Extension Extension · Developer Tools 10,000+ 7 ★ 12.84KiB

icon

CSSViewer Extension · Developer Tools 10,000+ 371 ★ 301KiB

icon

CSS Brio Extension · Developer Tools 10,000+ 5 ★ 86.26KiB

icon

Inspect CSS Extension · Developer Tools 10,000+ 24 ★ 404KiB

icon

Css Playground and Dom Tree Extension · Developer Tools 10,000+ 2 ★ 179KiB

icon

Hoverify Extension · Developer Tools 10,000+ 145 ★ 14.54MiB

icon

Live editor for CSS, Less & Sass - Magic CSS Extension · Developer Tools 10,000+ 266 ★ 2.15MiB

icon

Dimensions Inspect | Gridman Extension · Developer Tools 10,000+ 87 ★ 816KiB

User reviews

icon

Arfin Zabed (ID: 0000004ade37b515) Voted 5 ★ - Updated 10/15/2022 This is really helpful. Recommend for developers.

icon

Lakshmikanth Ayyadevara (ID: 0000007855985d2c) Voted 5 ★ - Updated 06/14/2021 Very well structured extension, but I need one feature where clicking on the extension icon it should change its color indicating that the extension is on, clicking on it again should remove the CSS outlines, great work keep it up

icon

Alessandro de Oliveira (ID: 000000836a22abf3) Voted 5 ★ - Updated 05/10/2021 It does very well its purpose. I recommend!

icon

Marina Riabets (ID: 00000016c7accb92) Voted 5 ★ - Updated 04/11/2020 Very helpful, thank you!

icon

Greg Lockwood (ID: 0000009977da8127) Voted 5 ★ - Updated 10/11/2017 An easy-to-use tool to quickly diagnose layout issues and page structure.