「ツール」メニュー(又は[F12]キー）から開発者ツールを起動すると、IE8に現在表示されているページのHTML要素の階層構造が自動的に表示される。ブラウザ画面でページを移動すれば開発者ツールも自動的に連動して更新される。
まずページの特定部分を調べたい、とします。その手順を示すと。(1)開発者ツールの[検索]メニューから＜クリックで要素を選択＞をクリック（又は、ツールバーの矢印ボタンか[Ctrl＋B]キー）
(2)IE8のページ上にマウス・カーソルを乗せると、青色の枠線で選択候補が囲まれる。マウス・カーソルを動かし調べたい部分にこの枠線が乗ったらクリックする。
（「全記事一覧」の行が青色枠線で囲まれるので、この枠線上をクリック）
(3)即座に連動して、開発者ツールがその位置の階層構造を展開し、クリックされた要素を反転選択して表示してくれる。
（該当部分はリストを表示する要素<ul><li>を使って構成されているのが判る）
「選択部分のHTMLソースを表示」と全く同じというわけではないが、それ以上の便利さと判りやすさだ。要素間の前後関係、親子関係が一目瞭然にわかります。要素に付けられたCSSのid名、クラス名もすぐわかる。
マイコンピューターの[＋][-]記号と同じで、階層ツリーの展開・折込みができ、ページ構造を調べるのには非常に便利になっている。
(4)今度は逆に、開発者ツール側でどれか要素をクリック選択する。すると連動してIE8で該当箇所を青色の枠線で囲って”ここですヨ！”と示してくれる。これほど便利なことはない！。
2011/1/16