HTML Hierarchy Visualizer

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

What is HTML Hierarchy Visualizer?

The 'HTML Hierarchy Visualizer' is an ingenious Chrome extension designed for front-end web developers. Its purpose is to simplify the process of understanding the hierarchy and layout of HTML elements on any given webpage. By applying dissimilar colored borders and backgrounds, each HTML element is cleanly distinguished, revealing the overall structure. The ease of turning this function on and off helps maintain productivity and focus on the development process.

Download

Extension stats

By: steven.massola

View on Chrome Web Store

Users: 2,000+

Rating: 5.00 (8)

Version: 0.0.0.5 (Last updated: 2016-09-13)

Creation date: 2016-09-13

Risk impact: Very low risk impact

Risk likelihood: Low risk likelihood

Manifest version: 2

Permissions:

activeTab

Size: 22.14K

Ranking

# 21536 ▼ 94

Other rankings

#6960 in Developer Tools ▼ 22 #33 in html keyword 27 ▼ 1 #67 in layout keyword 19 ▼ 3

Other platforms

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

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