HTML Hierarchy Visualizer
Item logo image for HTML Hierarchy Visualizer

HTML Hierarchy Visualizer

5.0(

8 ratings

)
ExtensionDeveloper Tools2,000 users
Item media 2 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 1 screenshot
Item media 1 screenshot
Item media 2 screenshot

Overview

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

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

5 out of 58 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Sergey KomarovJul 24, 2023

That's a good tool for frontend development. I was looking for something like that

Review's profile picture

Kishlay KisuMay 4, 2022

looks amazing, gonna use it now!

1 person found this review to be unhelpful
Review's profile picture

A Chrome Web Store userFeb 27, 2019

This is a great extension - it quickly shows the hierarchy, making toggling back and forth between views a breeze.

1 out of 2 people found this helpful

Details

  • Version
    0.0.0.5
  • Updated
    September 13, 2016
  • Offered by
    steven.massola
  • Size
    21.62KiB
  • Languages
    English
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has not provided any information about the collection or usage of your data.

Related

DOM Highlighter

5.0(4)

Highlight DOM elements

DOM X-Ray

5.0(1)

See through the DOM to visually debug CSS positioning.

Div Density

4.2(6)

This extension shows the density of elements on your page

DOM to JSON Converter

5.0(1)

The tool extracts element details (name, url, id, depth, value, alt, src and href) from webpage DOM. Works for iframes, too!

HTML Tree Generator

4.3(38)

Html is really a tree of elements, css is what defines the layout. This extension displays any page as a tree.

HTML & CSS Design Analysis

0.0(0)

Helps you analyze an HTML page by disabling or enabling various features.

Div Highlighter

3.3(7)

tool to highlight divs!

HTML DOM Navigation

4.7(18)

HTML DOM Navigation lets you view the node tree in a simple and easy way. IRB would be really useful for Watir automation.

Outliner CSS

5.0(8)

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

Outliner

5.0(3)

This extension outlines all the DOM elements on a page

HTML Visual Validation

4.4(8)

HTML Visual Validation gives you information about the html elements, live, on page.

Layout Debugger

4.0(3)

Chrome extension for highlighting DOM elements to better debug layout issues

DOM Highlighter

5.0(4)

Highlight DOM elements

DOM X-Ray

5.0(1)

See through the DOM to visually debug CSS positioning.

Div Density

4.2(6)

This extension shows the density of elements on your page

DOM to JSON Converter

5.0(1)

The tool extracts element details (name, url, id, depth, value, alt, src and href) from webpage DOM. Works for iframes, too!

HTML Tree Generator

4.3(38)

Html is really a tree of elements, css is what defines the layout. This extension displays any page as a tree.

HTML & CSS Design Analysis

0.0(0)

Helps you analyze an HTML page by disabling or enabling various features.

Div Highlighter

3.3(7)

tool to highlight divs!

HTML DOM Navigation

4.7(18)

HTML DOM Navigation lets you view the node tree in a simple and easy way. IRB would be really useful for Watir automation.

Google apps