HTML panel

ページ調査ツールの HTML パネルでは、調査ツールで現在選択している要素の HTML 構文を周囲の HTML と共に閲覧することができますので、その要素を生成する文脈を見ることができます。これはサイトのデバッグや、特定のレイアウトがどのように作られているかの学習に役立ちます。

注意: HTML パネルの表示/非表示は Ctrl-H を押すことで切り替えできます。

HTML のナビゲートを行う

HTML 中のノードをクリックして、さらなる調査のために要素を選択することができます。また、要素を選択していないときに HTML パネルを開いている場合は、マウスポインタを載せている要素の HTML を表示するようにパネルの内容が自動更新されます。これは、コードの問題点の発見に役立つツールにもなります。

html-panel.png

HTML パネルを表示しているときは、ページ調査ツールのツールバーの右端にリサイズ用のウィジェットが表示されますので、一度に見たい HTML の量に合わせてサイズを調節することができます。

属性の実験を行う

ソース中の属性値をダブルクリックして新しい値を入力することで、HTML 属性の値を変更することができます:

edit-html-attr.png

参考情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,