How do I ... Reveal the visible structure of a web page?

This bookmarklet script surrounds each object on a web page with a bounding box by using the accessibility-based outline feature. It is often faster and more compelling to use a browser's developer tools to accomplish something similar; and yet, because float based layouts often collapse, this bookmarklet sometimes better expresses how the page is structured. The bookmarklet also shows the entire structure of a page at once.

Using Google Chrome to reveal page structure

• Right click on an object and select Inspect Element.
• Hover over the HTML to highlight what parts of the page result from the HTML below your cursor.
• If your floats collapse and highlight nothing on the page, use the td bookmarklet.

Installing and Using the TD bookmarklet to reveal page structure

• Bookmark anything.
• Move bookmark to the bookmark menubar.
• Change the name to td.
• Change the URL to this javascript: javascript:(function()%7B function mark(elem) %7B if(elem.style) %7B elem.style.outline="1px solid green"; %7D %7D ; function recurse(elem,p) %7B var i, k, cn; if(!elem) %7B alert("null"); return; %7D mark(elem); cn = elem.childNodes; if(cn)%7B k = cn.length; for (i = 0; i < k; i++) %7B recurse(cn%5Bi%5D, p + "." + i); %7D %7D%7D recurse(document,"d"); %7D)();
• Click the bookmarklet when you want to see the underlying page structure of the page you are viewing visually.
• Reload to go back to a normal view of the page.