I’d like to analyze the structure of some complex web pages that I’ve visited. Manually parsing out tags in the HTML source is tedious and prone to errors.
I’d like to find a utility that will accept HTML source (or a URL) as input, and show the hierarchical arrangement of the HTML elements, including source and id attributes, preferably in a treeview.
I was confident that it should be easy to find such a tool, but a few Google searches haven’t turned up anything for me. I’m still confident that such a tool exists. Can the community help me find something? (I’m a Windows user and of course would prefer free if possible.)
IE8+ and Chrome both have wonderful developer tools built right in. Just visit a webpage and in IE, press F12, and in Chrome, go to wrench->tools->developer tools. They both show the tree view of the page as well as let you modify it. They’re both very powerful.