ブックマークレットから起動するCSSデバッグツール「YAML Debug」

YAML Debug - an assistive code diagnostic tool for web developers （別窓）

YAML Debugはブックマークレットから起動出来る手軽なCSSデバッグツールです。

インターフェースはこんな感じ。


このようにタグを表示したり


div要素を表示してレイアウトの階層を把握したり


グリッドを表示したりできます。


他にもaltが記述されてない要素や空の要素をハイライトしたりなんてことができます。
「Stylesheets」タブでは読み込まれているCSSが一覧表示され、CSSを無効にしたりコードを見たりバリデータに通したりなんてこともできます。

自分のサイトのデバッグはもちろん、他のサイトがどのように作られているかを調べるのにも使えそうですね。