こんにちは、さち です。
ウェブページの構造やデザインを調べる際は
Firegug というアドオンを使っているのですが
いつの間にか（「10」から？） Firefox に
同じような機能が標準搭載されていたらしい。
ということで今回は、Firefox に標準搭載された
Firebug のようにウェブページを調査する機能について
書いていきたいと思います。
基本操作
調査したいページを開いた状態で
「Ctrl + Shift + I」を押しましょう。
（メニューの「ツール」→「Web開発」→「調査」でも可）
すると、ウェブページの調査機能が立ち上がります。
起動スピードは Firebug よりも断然早いですね。
Firebug と似た部分もあるので
操作方法で困ることはあまりないかもしれませんが
基本操作について見ていきましょう。
バー左側には、要素を選択する際のボタンがあります。
このボタンを押せばページ上にある要素を直接選択できます。
HTMLソースを表示するボタンもあるので
ソースを見たい場合にはオンにしておきましょう。
バー右側には、CSS情報を表示するボタンがあります。
選択した要素の CSS を確認したい場合はオンにしましょう。
ウェブページの調査機能を終了する場合は
右端の「x」をクリックすればOKです。
「3Dビュー」についての説明は省略します。
どんな機能なのかはボタンを押せばよく分かります。
ちなみに、CSS情報は
ウィンドウ右側にこんな感じで表示されます。
CSS を編集して現在の表示に反映することも可能です。
要素の表示に関する設定
初期設定では、
周囲が暗転し選択した要素が強調表示されます。
また、要素の情報に関するフキダシも表示されます。
これらの「暗転」「フキダシ」の表示については
バー左側の歯車のボタンから設定を変更できます。
自分が使いやすいように変更しましょう。
Firefox に標準搭載されたウェブページの調査機能。
Firebug と比べると機能が簡易的な気はしますが
軽快に起動、動作するというのはよいですね。
ウェブページの構造を軽く調べるくらいなら
こちらでも十分なのではないかと思います。
コメント