This extension is a tool that helps visualize the layout of HTML elements on a webpage

Latest Version

Version
0.0.0.5
Update
September 13, 2016
Size
21.62KiB
Developer
Category
Users
2,000+
Rating
5 ★
Manifest Version
2
Web Store Status
Languages Support
English
See more
Permissions
ActiveTab
See more

HTML Hierarchy Visualizer Extension

HTML Hierarchy Visualizer is a visualization tool for front end web developers that assists in understanding the breakdown of a webpage. It creates colored borders and backgrounds to distinguish the ancestry and layout of HTML elements.

How To Use:
- Press chrome extension icon, a drop-down menu will appear
- Select either apply border or apply background to highlight the different elements on the page
- Select remove border or remove background to bring webpage back to original state
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "HTML Hierarchy Visualizer", "description": "This extension is a tool that helps visualize the layout of HTML elements on a webpage", "version": "0.0.0.5", "icons": { "16" : "/images/icon19.png", "48" : "/images/icon48.png", "64" : "/images/icon64.png"}, "browser_action": { "default_icon": "./images/icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab" ], "web_accessible_resources": ["colors.css"]}
Read more

Similar Extensions

icon

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

icon

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

icon

HTML DOM Navigation Extension · Developer Tools 2,000+ 18 ★ 13.89KiB

icon

Outliner CSS Extension · Developer Tools 2,000+ 11 ★ 13.01KiB

icon

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

icon

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

icon

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

icon

DOM Highlighter Extension · Developer Tools 2,000+ 4 ★ 52.1KiB

icon

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

icon

Div Density Extension · Developer Tools 2,000+ 6 ★ 6.95KiB

icon

DevTools Classes & Atributes panel Extension · Developer Tools 2,000+ 4 ★ 12.75KiB

icon

DOM to JSON Converter Extension · Developer Tools 2,000+ 1 ★ 18.23KiB

icon

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

icon

DOM node tree viewer. Extension · Developer Tools 2,000+ 4 ★ 281KiB

icon

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

icon

showHTML Extension · Developer Tools 2,000+ 2 ★ 12.59KiB

icon

HTML & CSS Design Analysis Extension · Developer Tools 2,000+ 0 ★ 1.47MiB

icon

HTML5 Debugger Extension · Developer Tools 2,000+ 1 ★ 9.01KiB

icon

Copy DOM Content Extension · Developer Tools 2,000+ 2 ★ 13.8KiB

icon

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

icon

Restyler Extension · Developer Tools 2,000+ 14 ★ 853KiB

icon

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

icon

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

icon

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

User reviews

icon

Sergey Komarov (ID: 000000d0aa12f564) Voted 5 ★ - Updated 07/24/2023 That's a good tool for frontend development. I was looking for something like that

icon

Kishlay Kisu (ID: 000000c81515fe26) Voted 5 ★ - Updated 05/04/2022 looks amazing, gonna use it now!

icon

Francisco Torres (ID: 000000cd21adca47) Voted 5 ★ - Updated 05/11/2019 yo le agregaria la opcion de seguir activado al actualizar la pagina... muy buena herramienta visual!

icon

(ID: ) Voted 5 ★ - Updated 02/28/2019 This is a great extension - it quickly shows the hierarchy, making toggling back and forth between views a breeze.

icon

Robb Shecter (ID: 0000002e590d2448) Voted 5 ★ - Updated 12/24/2016 Freakin' beautiful. Combines two great functions, each is better than some other extensions.