Show div structure of page in a diagram

Is there a way to show the div structure of a website with "blocks" that don't have the conten开发者_如何转开发t within. Like just boxes to show where the divs are positionally and relationally. I have firebug and web dev, but they don't just outline the div like that.

very basic outlining using jQuery (you can run this on this page if you like):

var $body = $(document.body);

$('div').each(function(){
    var $this = $(this),
       offset = $this.offset(),
        width = $this.outerWidth(),
       height = $this.outerHeight()

    $body.append(
        $('<div style="position:absolute;border:1px solid #00F;background:#99F;opacity:.3;"></div>')
        .css(offset)
        .css({ width: width, height: height })
    );
});

if you don't need to see depths (handled by transparency here), just do:

div {
    outline : 1px solid #00F;
}

I usually use outline to do this. Functions like border but without affecting layout widths:

div { outline: 1px solid red; }