I use the following bit of CSS to help visualize the structure of an XHTML (or HTML) document by putting a colored outline around the border of every element. At each level in the hierarchy the color changes so you can see when “depth” changes.

デバッグ用CSSのスニペット。
このCSSを定義しておくことで、階層的な構造を視覚的に次のように表示できます。



次がそのデバッグ用CSS

 * { outline: 2px dotted red }
 * * { outline: 2px dotted green }
 * * * { outline: 2px dotted orange }
 * * * * { outline: 2px dotted blue }
 * * * * * { outline: 1px solid red }
 * * * * * * { outline: 1px solid green }
 * * * * * * * { outline: 1px solid orange }
 * * * * * * * * { outline: 1px solid blue }

HTML構造が複雑になっても分かりやすく表示できて便利ですね。

関連のFirefox拡張
-Firebug
-WebDeveloper

情報元
Sooey - CSSデバッグ用Snippet