English
See more
Add CSS Outline property to all elements on the page for debugging CSS Layout.
Latest Version
Version
1.0
Update
January 9, 2020
Size
31.23KiB
Developer
Category
Users
373 
Rating
0 ★
Manifest Version
2
Web Store Status
Extension ID
Languages Support
Permissions
ActiveTab
See more
Outline All Elements Extension
A Chrome Extension for adding CSS Outline property (with different colors) to all elements on the page.
Mainly this is useful for debugging CSS Layout and discovering potential issues.
Notes:
- Click the extension icon for activating/deactivating.
- The outline colors are randomized based on it's order on the page.
- The colors are randomized by assigning different cumulative Hue degree and a fixed Saturation (99%) and Light (50%).
- On deactivating, the extension will restore the old outline value if it was there, and remove the style HTML attribute if it wasn't there before activating.
Source Code:
https://github.com/MohannadNaj/outline-all-elements
Read more
Mainly this is useful for debugging CSS Layout and discovering potential issues.
Notes:
- Click the extension icon for activating/deactivating.
- The outline colors are randomized based on it's order on the page.
- The colors are randomized by assigning different cumulative Hue degree and a fixed Saturation (99%) and Light (50%).
- On deactivating, the extension will restore the old outline value if it was there, and remove the style HTML attribute if it wasn't there before activating.
Source Code:
https://github.com/MohannadNaj/outline-all-elements
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Outline All Elements", "version": "1.0", "description": "Add CSS Outline property to all elements on the page for debugging CSS Layout.", "manifest_version": 2, "background": { "persistent": true, "scripts": ["background.js"] }, "permissions": ["activeTab"], "browser_action": { "default_icon": {\t\t\t"16": "icon_16.png",\t\t\t"32": "icon_32.png",\t\t\t"48": "icon_48.png",\t\t\t"128": "icon_128.png" } }, "icons": { "16": "icon_16.png", "32": "icon_32.png", "48": "icon_48.png", "128": "icon_128.png" }}
Read more
Similar Extensions
Outliner CSS 373 11 ★ 13.01KiB
Outliner 373 3 ★ 15.99KiB
Looksee 373 3 ★ 45.51KiB
Css Layout Hack 373 3 ★ 167KiB
Layout Debugger 373 3 ★ 251KiB
Inspector on acids 373 4 ★ 81.17KiB
Div Highlighter 373 7 ★ 5.47KiB
Show CSS Outline Style 373 4 ★ 18.41KiB
Outline HTML Elements 373 1 ★ 49.84KiB
DOM Outliner 373 0 ★ 5.2KiB
Debug CSS 373 35 ★ 19.06KiB
DOM X-Ray 373 2 ★ 57.82KiB
Domquest 373 2 ★ 32.3KiB
Outline Chrome Extension 373 7 ★ 12.84KiB
Layout Bounds 373 1 ★ 6.7KiB
HTML & CSS Design Analysis 373 0 ★ 1.47MiB
DOM Highlighter 373 4 ★ 52.1KiB
MageTools: DevTools Reimagined 373 9 ★ 84.8KiB
Div Density 373 6 ★ 6.95KiB
Lavaca Developer Tools 373 0 ★ 10.42MiB
console.sparkline 373 1 ★ 4.7KiB
HTML Hierarchy Visualizer 373 8 ★ 21.62KiB
showHTML 373 2 ★ 12.59KiB
EazyCSS 373 13 ★ 2.98MiB
