HTMLのデバッグ

• HTML要素の確認
• 要素の編集

HTMLの要素を確認する方法を説明します。Chromeの開発者ツールを使って説明しますが、Firefox、IE、Safari、Opera、で同様のことができます。

HTML要素の確認

開発者ツールを開き、Elementsタブを選択します。

DOMツリー構造が表示されます。▼ボタンをクリックしてツリーを展開し、確認したい要素を選択しましょう。
DOMツリー上でマウスオーバーした要素にオーバーレイが掛かり、表示位置を確認できます。

また、ページ上からDOM要素を選択することもできます。

虫眼鏡のアイコンをクリックします。

この状態でページ上のDOMを選択すると、開発者ツールに表示されたDOMツリーが展開されて、要素のツリー上の位置や記述を確認できます。

IEの場合は動的に追加された要素が表示されていない場合があります。その時は更新ボタンを押してDOMツリーを最新の状態にして確認してください。

要素の編集

DOMツリー上の要素をダブルクリック、または右クリックからEdit Attribute(属性の編集)またはEdit as HTML(HTMLの編集)を選択して、編集することができます。

編集した内容はエンターキーを押すとすぐに反映されて表示されます。