Quick Links
- Page Inspector
- HTML Inspector
- CSS Inspector
- JavaScript Scratchpad
- Web Console
- Get More Tools
Firefox の Web Developer メニューには、ページの検査、任意の JavaScript の実行、HTTP リクエストや各種メッセージの表示など、開発時に必要なツールがまとまっています。Firefox 10 で導入された新しい Inspector と更新された Scratchpad（構文ハイライト付き）は、より使いやすくなりました。
Firefox の組み込み開発者ツールは、Firebug や Web Developer Toolbar のような優れたアドオンと組み合わせることで、ウェブ開発に理想的な環境を提供します。すべてのツールは Firefox のメニュー内「Web Developer」から利用できます。
Page Inspector
要素を検査するには、対象の要素を右クリックして「Inspect」（またはキーボードで Q を押す）を選びます。Web Developer メニューから起動することも可能です。
選択すると、画面下部にツールバーが表示されます。選択中の要素はハイライトされ、ページ上の他の要素は薄く表示されます。
新しい要素を選びたい場合はツールバーの Inspect ボタンをクリックして、ページ上でホバーし、クリックしてください。Firefox はカーソル下の要素を強調表示します。
ツールバーのパンくず（breadcrumbs）をクリックして、親要素や子要素へ移動できます。これにより DOM ツリーの構造を直感的にたどれます。
重要: Page Inspector は視覚的に問題を特定する最初の手段です。レイアウト崩れや透明化、重なり順（z-index）問題などはここでほぼ把握できます。
HTML Inspector
HTML ボタンをクリックすると、選択中の要素の HTML コードが表示されます。
HTML インスペクタではタグの展開・折りたたみができます。階層を視覚的に確認しやすく、構造の把握が速いです。ページ全体のソースを平坦なファイルで見たい場合は、Web Developer メニューから「View Page Source」を選んでください。
活用ヒント:
- 動的に生成される要素は、インスペクタで確認することで実際の DOM 状態を把握できます（ページソースとは異なる場合があります）。
- 属性（data- や aria-）の値を直接編集して振る舞いを試せます。
CSS Inspector
Style ボタンをクリックすると、選択要素に適用されている CSS ルールを確認できます。
Rules（ルール）と Properties（プロパティ）を切り替えられるパネルがあります。Properties パネルには検索ボックスがあり、特定のプロパティを素早く見つけられます。
Rules パネルからは CSS をその場で編集できます。チェックボックスを外してルールを無効化したり、テキストをクリックして値を変更したり、パネル上部から独自のルールを追加できます。例えば次のように font-weight を追加すると、要素の文字が太字になります。
実践テクニック:
- レンダリングの問題を切り分けるときは、display、position、z-index、overflow などを一つずつ変更して影響を観察します。
- 既存のルールに打ち消されている場合は、どのルールが優先されているか（特異性や later-on-page）を確認します。
JavaScript Scratchpad
Scratchpad（スクラッチパッド）は Firefox 10 で更新され、構文ハイライトが追加されました。現在のページで実行する JavaScript を入力できます。
コードを書いたら、Execute メニューから Run を選びます。コードは現在のタブで実行されます。
例: コンソールへメッセージを出す簡単なコード
window.console.log("Hello World");注意: Scratchpad で実行したコードはページの実行コンテキスト内で動くため、変数や関数に影響を与えることがあります。必ず非破壊的な操作から始めてください。
Web Console
Web Console は旧 Error Console の代替で、古い Error Console は非推奨です。コンソールはネットワークリクエスト、CSS エラー、JavaScript エラー、開発者メッセージの 4 種類のメッセージを表示できます。各種メッセージは表示・非表示を切り替え可能です。
「Web developer messages」とは window.console オブジェクトに書き込まれるメッセージのことです。Scratchpad で次のように実行すると、コンソールにメッセージが表示されます。
window.console.log("Hello World");
ページをリロードすると生成されるネットワークリクエストやその他のメッセージも確認できます。
検索ボックスを使ってメッセージをフィルタし、詳細を見たいリクエストをクリックして情報を展開できます。
Page Inspector と連携して使うと強力です。インスペクタで選択中のオブジェクトはコンソールで $0 変数として参照できます。たとえば、選択した要素を隠したい場合は次のように実行します。
$0.style.display = "none";
詳しい組み込み関数や使い方は Mozilla の Developer Network（MDN）にある Web Console ページを参照してください。
Get More Tools
Get More Tools オプションは、Mozilla Add-Ons の Web Developer’s Toolbox コレクションへ移動します。Firebug や Web Developer Toolbar をはじめとした、開発者向けの優秀なアドオンがまとめられています。
もし数年前から Firefox を使っているなら、DOM Inspector を覚えているかもしれません。統合された開発者ツールはそこから大きく進化しました。
実務でのワークフロー（ミニ・メソドロジー）
- 問題の再現手順を再現してページをロードする。
- Page Inspector で対象要素を選択し、HTML 構造と CSS を確認する。
- CSS を一時的にオフ／編集して影響を確認する。
- ネットワークリクエストは Web Console で確認し、必要があれば再現ログを取得する。
- Scratchpad やコンソールで修正案を試し、動作を確かめる。
- 変更をソース（スタイルシートや JS）に反映し、再度テストする。
この手順は「問題の特定→切り分け→修正案の検証→恒久対策」というデバッグの基本に沿っています。
役割別チェックリスト
開発者:
- 要素の CSS/HTML を編集して修正を試す。
- コンソールでエラーとスタックトレースを確認する。
- ネットワーク遅延や失敗を Web Console で確認し、API の応答を検証する。
QA:
- 問題を再現するための最小手順を記録する。
- コンソールのエラーログ（日時、エラー内容）を添えてバグレポートを作成する。
- スタイルの回帰チェックを行い、複数の画面幅で検証する。
デザイナー:
- レイアウトやフォント、カラーパレットをインスペクタで確認する。
- 実際のブレークポイント（レスポンシブ）を確認して、意図したデザイン通りか検証する。
よく使うスニペット集（チートシート）
- 選択中の要素を非表示にする
$0.style.display = "none";- console 出力
console.log("変数の中身:", someVar);
console.error("エラーの詳細:", err);- 要素のテキストを変更する
$0.textContent = "テスト用テキスト";- ネットワークリクエストの再現に便利なヘッダ確認（コンソールでクリックして開く）
代替アプローチと比較
- 他ブラウザの DevTools（Chrome や Edge）と比べると、Firefox はアクセシビリティ確認や CSS Grid の視覚化、カラーマネジメントの点で優れています。
- ただしチームで Chrome ベースの拡張機能に依存している場合は、作業の互換性を考え Chrome DevTools を併用することを検討してください。
いつこの方法が通用しないか（反例）
- サーバ側で生成される HTML を直接修正したい場合、ブラウザ内の編集だけでは不十分です。サーバ側ソースに変更を入れてデプロイする必要があります。
- サードパーティスクリプト（CDN 上で動作する一部のライブラリ）は、クライアント側の一時変更で完全に制御できない場合があります。
トラブルシューティングの簡易プレイブック
- コンソールのエラーメッセージを最初に読む。行番号やファイル名をメモする。
- Page Inspector で対象要素を選び、期待されるスタイルが適用されているか確認する。
- ネットワークタブでリソースが 200 で返っているか、CORS エラーがないか確認する。
- Scratchpad／コンソールで小さなコードを実行して、修正の当たりを付ける。
- 修正が確定したら、ソースに反映してビルドし、環境（ステージング）で再テストする。
重要: 変更を本番に反映する前に必ずソース管理（Git など）で差分をレビューし、ユニット／統合テストを通してください。
1行用語集
- Page Inspector: ページ内の DOM とスタイルを視覚的に検査するツール。
- Scratchpad: ブラウザ上で JavaScript をテスト実行できる簡易エディタ。
- Web Console: ログ、エラー、ネットワーク情報を表示するコンソール。
セキュリティとプライバシーへの注意
- Scratchpad やコンソールで実行するコードは、現在開いているページのコンテキストで動きます。信頼できないサイトでは実行しないでください。
- コンソールログに API キーや個人情報を出力しないでください。ログは他者に見られる可能性があります。
まとめ
- Firefox の Web Developer ツールは、DOM、CSS、JavaScript、ネットワークの各観点からデバッグを行える総合的なツール群です。
- Page Inspector と Web Console の連携（$0 など）は、要素の即時操作と検証をスムーズにします。
- 実運用では再現 → 切り分け → テスト → 差分反映という工程を守ると安全で確実です。
注意: この記事はツールの一般的な使い方と実務向けのワークフローを説明するもので、詳細な API 仕様やバージョン固有の差異は MDN 等の公式ドキュメントを参照してください。
