tool to show me just the markup outline in a web page

Question

IS there any tool that does the following, given a url?

1. strip everything (all text) from the page, except the markup (all the html elements)
2. add a border to all the div, span, table, tr, td etc in the page
3. keep the original size of the div, span etc (even though they are empty now, in terms of the data in them)

Answer 1

You could write a browser plugin for that, because it's not hard to do with Javascript:

1. Set the following CSS rule for all elements: color: transparent; which makes the text transparent
2. Add the following CSS rule to all elements you want: outline: 1px solid red;
3. Will automatically happen with the color and outline properties

---

jQuery example at jsFiddle:

$('*').css( 'color', 'transparent !important' );
$('div, span, table, tr, td, ...').css( 'outline', '1px solid red !important' );