Firefoxには開発者ツールが標準搭載｜F12で起動できるDevToolsの機能と使い方を解説

Firefoxには、Web制作やWebアプリのデバッグに使える開発者向けツール「Firefox Developer Tools（DevTools）」が標準で組み込まれています。Chromeのデベロッパーツールと同じように、HTMLやCSSの確認、JavaScriptのデバッグ、通信内容の調査などをブラウザだけで行えます。

そのため、通常版Firefoxをインストールしていれば、基本的に別途アドオンや専用ソフトを追加する必要はありません。WindowsやLinuxではF12キーまたはCtrl＋Shift＋I、macOSではCommand＋Option＋Iなどから起動できます。

Firefoxにはインスペクター、ウェブコンソール、デバッガー、ネットワークモニター、スタイルエディター、ストレージインスペクター、レスポンシブデザインモードなど多数の機能があります。ここでは起動方法から、それぞれ何に使えるのかまで分かりやすく解説します。

FirefoxにはWeb開発者向けツールが最初から入っている

Mozilla公式ドキュメントでは、Firefox Developer Toolsについて「Firefoxに組み込まれているWeb開発者向けツールのセット」と説明されています。HTML、CSS、JavaScriptを調査・編集・デバッグするために利用できます。[参照] Mozilla「Firefox DevTools User Docs」

つまり、一般向けの通常版FirefoxにもDevToolsが搭載されています。「Firefox Developer Edition」でなければ使えない機能ではありません。通常版FirefoxでもF12などから開発者ツールを開けます。

例えばWebページのレイアウト崩れを確認したい場合、Firefoxだけをインストールした状態でインスペクターを起動し、HTML要素と適用されているCSSを調べることができます。

F12キーでFirefoxの開発者ツールを起動できる

WindowsおよびLinux版Firefoxでは、F12キーを押すと開発者ツールを開閉できます。Mozillaの公式キーボードショートカットにも「開発ツールの切り替え」としてF12が掲載されています。[参照] Mozilla「Firefoxのキーボードショートカット」

Windows・LinuxではCtrl＋Shift＋Iでも開発者ツールを開けます。macOSではCommand＋Option＋Iが対応するショートカットです。[参照] Mozilla「All keyboard shortcuts」

ノートPCなどでF12が音量や機能キーに割り当てられている場合は、Fnキーと組み合わせる必要があることがあります。その場合でもCtrl＋Shift＋Iを使えば起動できるため、F12だけにこだわる必要はありません。

メニューや右クリックから開くこともできる

ショートカットキーを使わなくても、Firefoxのメニューから開発者ツールを起動できます。Mozilla公式ドキュメントでは、メニューから「その他のツール」などを経由してWeb開発ツールを開く方法が案内されています。[参照] Mozilla「Toolbox」

また、Webページ上の調べたい部分を右クリックして「調査」を選択すると、その要素を選択した状態でインスペクターを直接開けます。

例えばボタンの色や余白を調べたいとき、ボタンを右クリックして「調査」を選べば、そのボタンに対応するHTMLとCSS付近がすぐ表示されます。Web制作では特に便利な起動方法です。

インスペクターではHTMLとCSSを確認・一時編集できる

Firefox DevToolsで最も利用機会が多い機能の一つが「インスペクター」です。現在表示されているページのDOM構造を確認し、それぞれのHTML要素にどのCSSが適用されているかを調べられます。

例えば見出しを選択すると、<h2>や<h3>などのタグ、class名、id、適用されているfont-sizeやmarginなどを確認できます。

さらにDevTools上でHTMLやCSSを一時的に書き換えて表示結果を試すこともできます。ただし、この変更は自分のブラウザ内だけで行われる一時的なもので、Webサイトのサーバー上にある元データを書き換えるものではありません。

ウェブコンソールではJavaScriptやエラーを確認できる

Firefoxには「ウェブコンソール」も標準搭載されています。Webページが出力したJavaScriptのログ、警告、エラーなどを確認できるほか、JavaScriptコードを直接入力して実行することもできます。

Windows・LinuxではCtrl＋Shift＋K、macOSではCommand＋Option＋Kでウェブコンソールを開けます。Mozilla公式のショートカット一覧にも掲載されています。[参照] Mozilla Firefox DevToolsショートカット

例えばJavaScriptが正常に動作せずボタンを押しても反応しない場合、コンソールを見ると「変数が定義されていない」「ファイルの読み込みに失敗した」などのエラーを確認できることがあります。

ネットワークモニターではWeb通信を調べられる

「ネットワーク」または「ネットワークモニター」では、Webページを表示するときにFirefoxがどのファイルやサーバーへアクセスしたのかを確認できます。

HTML、CSS、JavaScript、画像、フォント、API通信などについて、URL、HTTPステータスコード、転送サイズ、読み込み時間、リクエスト・レスポンスヘッダーなどを調べられます。

例えば「画像が表示されない」という問題では、ネットワークモニターを開いてページを再読み込みし、画像リクエストが404エラーになっていないか確認できます。Windows・LinuxではCtrl＋Shift＋E、macOSではCommand＋Option＋Eで開くこともできます。[参照] Mozilla Firefoxキーボードショートカット

デバッガーではJavaScriptを詳しく追跡できる

JavaScriptの不具合を詳しく調べたい場合には「デバッガー」を利用します。読み込まれたJavaScriptファイルを確認し、ブレークポイントを設定してプログラムを途中で停止させ、変数の値や処理の流れを調べられます。

例えばクリック時に計算するプログラムが間違った結果を返している場合、途中の行へブレークポイントを設定し、一行ずつ処理を進めながら変数の値を確認できます。

単純なconsole.logによる確認よりも、複雑なJavaScriptの問題を追跡しやすいのがデバッガーの特徴です。

レスポンシブデザインモードでスマホ表示を確認できる

Firefox DevToolsには、スマートフォンやタブレットに近い画面サイズでWebページを確認する「レスポンシブデザインモード」もあります。

Windows・LinuxではCtrl＋Shift＋M、macOSではCommand＋Option＋Mで切り替えられます。[参照] Mozilla Firefox DevToolsショートカット

例えばPCでは正常なのにスマートフォンではボタンが画面外へはみ出してしまう場合、ブラウザウィンドウを何度も手作業で小さくするより、レスポンシブデザインモードで幅375pxなどを指定して確認したほうが効率的です。

CSSを編集するスタイルエディターも搭載されている

Firefoxには「スタイルエディター」があり、ページに読み込まれているCSSスタイルシートを一覧で表示し、内容を編集しながら表示結果を確認できます。

Windows、macOS、LinuxではShift＋F7からスタイルエディターを開けます。複数のCSSファイルを使用しているサイトで「どのファイルの記述を変更すればよいのか」を調べる場合にも便利です。

インスペクターが特定要素のCSS確認に向いているのに対し、スタイルエディターはスタイルシート全体を確認・試行するときに使いやすい機能です。

ストレージインスペクターではCookieなどを確認できる

Firefox DevToolsには、Webサイトがブラウザに保存しているデータを確認するストレージインスペクターもあります。

Cookie、Local Storage、Session Storage、IndexedDBなどの内容を調べることができ、ログイン処理やWebアプリの状態管理を開発するときに役立ちます。

例えば「ログイン状態が保持されない」という問題では、Cookieが正しく設定されているか、期限やドメインが適切かなどを確認するために利用できます。

ページソース表示と開発者ツールは別の機能

FirefoxにはCtrl＋Uで「ページのソース」を表示する機能もありますが、これはF12で開くDevToolsとは異なる機能です。

ページソース表示は主にサーバーから取得したHTMLソースを確認するための機能です。一方、DevToolsのインスペクターでは、JavaScript実行後に変化した現在のDOMまで確認できます。

例えばJavaScriptによって後から追加された商品一覧は、Ctrl＋Uで表示した元のHTMLに存在しなくても、F12のインスペクターには表示されることがあります。「元のHTMLを読みたいならCtrl＋U」「現在の画面構造を詳しく調べたいならF12」と使い分けると分かりやすいでしょう。

Firefox Developer EditionでなくてもDevToolsは利用できる

「開発者ツールを使うならFirefox Developer Editionをインストールする必要がある」と思われることがありますが、基本的なFirefox DevToolsは通常版Firefoxにも組み込まれています。

Mozilla公式もFirefox Developer ToolsをFirefoxに組み込まれたツールとして案内しています。通常版でもインスペクター、コンソール、デバッガー、ネットワークモニターなどを利用できます。[参照] Mozilla Firefox DevTools User Docs

Developer EditionはWeb開発者向けの設定や新しい開発機能を試しやすい別エディションですが、「F12でHTMLやCSSを調べたい」という程度なら通常版Firefoxで十分です。

F12を押しても開かない場合の確認ポイント

F12を押しても反応しない場合は、まずCtrl＋Shift＋Iを試します。ノートPCではF12が音量、画面輝度、メーカー独自機能などに割り当てられており、FirefoxまでF12入力が届いていない場合があります。

また、企業や学校などが管理しているFirefoxでは、組織のポリシーによって開発者ツールが無効化されている可能性もあります。そのような管理端末では、利用者側だけでは設定を変更できないことがあります。

通常の個人用Firefoxであれば、メニューからWeb開発ツールを選択できるか確認し、Firefoxを最新版に更新して再起動するのも基本的な対処方法です。

Firefox DevToolsでできることを一覧で整理

Firefoxに標準搭載されている主なWeb開発機能を整理すると、次のようになります。

Webサイトを作るだけでなく、「なぜCSSが効かないのか」「なぜAPI通信が失敗したのか」「どのJavaScriptでエラーが出ているのか」といったトラブルを調査するときにも利用できます。

まとめ｜FirefoxにはF12で使えるDevToolsが標準搭載されている

Firefoxには、Web開発者向けのFirefox Developer Toolsが標準で組み込まれています。HTMLやCSSを調べるインスペクター、JavaScriptを扱うウェブコンソールとデバッガー、通信を確認するネットワークモニターなど、本格的なWeb開発に必要な機能をブラウザだけで利用できます。

Windows・LinuxではF12またはCtrl＋Shift＋I、macOSではCommand＋Option＋Iから開発者ツールを起動できます。ページ上の特定要素を調べたい場合は、右クリックして「調査」を選択する方法も便利です。

これらの機能はFirefox Developer Editionだけのものではなく、通常版Firefoxにも搭載されています。そのため、単にWebページのHTML・CSS・JavaScriptやネットワーク通信を確認したいのであれば、追加の拡張機能を入れる必要はありません。

Firefoxは閲覧用ブラウザとしてだけでなく、F12から本格的なWeb開発・デバッグを行えるブラウザです。Web制作を勉強するときやサイトの不具合を調査するときには、まず標準のDevToolsを活用するとよいでしょう。