CSS Debug Toggle

2005年2月3日 著

codepoetryのCSS Debugger, Reduxで紹介されているbookmarklet、CSS Debug Toggleは素晴らしいツールです。以前、当覚え書きでMouseover DOM Inspectorというのを取り上げましたけど、CSS Debug Toggleはそれよりも「全然」便利ですね。こんな便利なツールを知らずに生きてきたことを少しばかり後悔しました（大袈裟）。
Webページ単体における文書構造を、見栄えにできるだけ影響を与えない範囲で可視化するというツールを探していたけれど、なかなか見当たらなくて渋々Mouseover DOM Inspectorを使ってきました。CSS Debug Toggleはまさにその僕の要望を完璧に叶えてくれるものです。デフォルトの状態では見出し要素、id/class属性のあるdiv/span/table要素、それにname属性とstyle属性を持つ要素の存在を枠線や文字情報でもって知らせてくれます。あぁ素敵！もっとも、自分がしっかりJavaScriptやDOMを理解して、この手のツールを自作できるぐらいになっていれば良いのですが以下略。
このbookmarkletはwww.codepoetry.net上にあるCSSファイルを参照しているので、おそらくネットに接続した環境でないとうまく動かないと思いますけど、実質的には問題無いでしょう。仕事場も自宅も常時接続ですから。表示上の文字や枠線のカスタマイズはCSSファイルを編集することで実現できるので、自分好みのセットを別サーバ上に置き、そちらを参照するようにURIを書き換えると吉、です。