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
You can Follow the below Step By Step procedure to install the HTML Hierarchy Visualizer Chrome Extension to your Chrome Web browser.
It is the HTML Hierarchy Visualizer Chrome extension download link you can download and install Chrome Browser.
Chrome extension for highlighting DOM elements to better debug layout issues
This extension outlines all the DOM elements on a page
This extension shows the density of elements on your page
Html is really a tree of elements, css is what defines the layout. This extension displays any page as a tree.
HTML DOM Navigation lets you view the node tree in a simple and easy way. IRB would be really useful for Watir automation.
A totally awesome structure and layout debugger that inserts CSS outlines to all elements.
HTML Visual Validation gives you information about the html elements, live, on page.