D4 ブラウザーの活用と検索術 - 10 ブラウザーの便利な活用法 - 25 Webページのデバッグに利用
30 中級
10 Webページをデバッグする Firefox
WebページのデバッグにFirefoxを利用する方法
Firefoxには、「開発ツール」という機能があり、Webページのデバッグに利用することができます。
Web上の要素をクリックすると、その要素を表すHTMLのコードと、適用されているCSSのコードが表示され、正しくコーディングされているかを確認することができます。
また、その場で、CSSのコードを一時的に変更して、Webページの表示が、どのように変わるのかを、チェックすることなどもできます。
非常に多くの機能がありますが、基本的な機能の部分を説明します。
【１．開発ツールの画面】
開発ツールを起動すると、下図のように、Firefoxの画面が3分割されて、①実際のWebページの表示と、②HTMLのコードと、③CSSのコードとを同時に確認することができます。
【２．開発ツールの起動方法】
デバッグしたいWebページをFirefoxで開き、開発ツールを起動します。
起動方法には、2つのやり方があります。いずれかの方法で起動します。
（１）ファンクションキーで起動する
ファンクションキーの、①「F12」を押して起動します。
