Mouseover DOM Inspector

2004年12月13日 著

Webページ上の文書構造をチェックするべく、ある特定のテキストや画像が果たして何要素を使ってマークアップされているのかを簡便に知る方法を探してみました。視覚系ブラウザを用いてのチェックを想定していて、オリジナルのレンダリング結果上に強制的に要素名を埋め込んで再表示してくれるようなツールがあったら理想的と思っていたのです。しかし、頑張って検索で調べてみても空振りしマクリ。
唯一、自分の希望に近いかも？な存在としてMouseover DOM Inspectorを発見しました。これはいわゆるfaveletもしくはBookmarkletと呼ばれるJavaScriptなんですが、マウスの位置を拾ってそこにレンダリングされた情報に適用されている要素名とかhtml要素に始まる構造上の包含関係（親子関係と言ったほうが良いのかな）を教えてくれます。ひととおり文書構造を把握したあとは、Escキーを押せば元通り。なかなか素晴らしいツールです。
ちなみに、同じサイトに掲載されていたDocument Tree Chartっていうのが名前からしてまず真っ先に僕の捜し求めていたモノに近いでは！？と思ったんですが、違いました。こちらは、Webページ全体の文書構造を要素名と共にカラフルに表示してくれるfaveletでして、あまり実用性は無いなぁという印象。面白いとは思うんですけどねぇ〜いかんせんチョット複雑な構造になった途端にワケわからんというか見づらいというか。せめてid/class値も一緒に表示してくれると嬉しいです。