ページ構造の把握に便利
■ブロックレベル要素に枠を付けて構造を把握
全ブロックレベル要素に枠線を付加
ブロックレベル要素がたくさんあると、それぞれがどんな配置になっているのかが分かりにくくなることがあります。この機能を使えば、各ブロックが、どれくらいの大きさでどこに配置されているのかを簡単に把握できて便利です。
「枠表示」→「枠表示には要素名も表示する」にチェックを入れておけば、「div」や「p」などの要素名も同時に表示できます。
マウスを載せた要素の詳細を表示
マウスをページ上の任意の位置に動かすと、
- その位置にある要素が枠で囲われ、
- 「html要素」から「その要素」までのツリー構造が上部に表示され
特定の位置にある要素が何なのか、その要素までのツリー構造はどうなっているのか、その要素はどれくらいのサイズで表示されているのか、などの情報を手軽に把握できて便利です。
id属性値とclass属性値を一括表示
また、「情報」→「アンカーを表示する」を使えば、アンカー（ページ内リンクのリンク先）になり得る名称（＝id属性値やa要素のname属性値）だけが、各要素のそばに表示されます。この機能は、「自分で作ったページの構造把握」にも便利ですが、「リンク先ページにどんなアンカーがあるのかを調べる」目的にも便利です。
tableのセルに枠線を付加
レイアウトはCSSを使って実現する方が望ましいですが、テーブルを駆使してレイアウトを作っていることもあるでしょう。テーブルレイアウトの構造がどうなっているのかを把握したい場合に便利です。
この機能は、現状のテーブルレイアウトの構造を把握して、CSSでのレイアウトに修正する方法を検討する際にも便利でしょう。
任意の位置に定規(ルーラ)を表示
任意の場所でドラッグすると、その範囲内に右図のようなマス目が表示されます。これによって、要素の表示サイズや、2点間の距離などを調べられます。
なお、ルーラ表示モードを終了するには、ルーラツールバーの右端にある「×」ボタンをクリックします。
動作確認に便利
■ページ内にあるすべてのフォームの仕様を一覧で確認
ページ内のフォームの仕様を一覧
この機能を使うと、新たなタブが開き、ページ内に含まれるすべてのフォームの要素や属性値が右図のような一覧表で表示されます。どんな入力欄があるのか、それらにどんな属性値が指定されているのか、などを確認したい場合に便利です。
フォームは、CGIなどのプログラムへ情報を渡すためにも使われます。このとき、予期していないイレギュラーな情報が送られた場合に、おかしな処理をしてしまわないかどうかを確認しておくことは大切です。
フォームに対する様々な処置が可能
また、「フォーム」→「ラジオボタンをクリアする」で、本来ならどれか1つが必ず選択されているはずのラジオボタンを「1つも選択されていない状態」にできます。
これらの機能を使って、おかしな処理がされないかどうかを確認しておきましょう。
cookieを一覧表示
これらの機能は、Cookie関連の動作確認や、現状のCookieの把握に役立ちます。
