Tool to view a web page's div structure

Issue

Is there a tool out there that can show you an entire page's div layout structure?

I'm using Chrome's inspect tool and it shows individual divs as you scroll through, but I'm hoping there's a tool out there that will look at the entire page's structure to help with div layout "debugging."

I've googled in general and on here and haven't found anything.

Thanks.

Solution

Open up the web tools and create a new CSS rule:

div { outline: 1px solid red !important; }

If you are tired of adding the rule after every refresh, add this code as target to a bookmark (or drag'n'drop it into your bookmarks panel):

javascript:{s=document.createElement("style");s.appendChild(document.createTextNode("div {outline: 1px solid red}"));document.head.appendChild(s);void(0)}

Answered By - Hubert Grzeskowiak