デスクトップとモバイルで、HTML と CSS と JavaScript を調査、編集、デバッグします。

Firefox で利用できるウェブ開発ツールを使う上での情報を探すのに、あなたはうってつけの場所に来ています — このページは主要ツールと追加ツールすべての詳細な情報、Android 用 Firefox への接続やデバッグのやり方といったより詳しい情報、開発ツールの拡張のやり方、ブラウザー全体のデバッグのやり方へのリンクを提供します。

サイドバーにあるリンクを探索して、ページまで読み進めてください。開発ツールに関してのフィードバックや質問があれば、我々のメーリングリストか IRC チャンネル (ページ最下部のコミュニティリンクをご覧ください) にメッセージを送ってください。もし文書に関しての明確なフィードバックや質問があれば、MDN discourse が投書するのに良いサイトです。
 

注記: もしウェブ開発や開発ツールの使用について初心者ならば、ウェブ開発を学ぶ が役に立つでしょう — 良いスタートラインとして ウェブ入門ブラウザー開発者ツールとは? をご覧ください。

主要ツール

WindowsとLinuxでは Ctrl + Shift + I 、OS Xでは Cmd + Opt + I で開くことができる開発者ツールバーの右側には、アクションを実行したり、ツールの設定を変更できるいくつかのボタンがあります。

このボタンはページに複数の iframe があるときにだけ表示されます。現在のページにある iframe のリストを表示するためにクリックをし、動作させたいものを選択します。

現在のページのスクリーンショットを撮影する場合にこのボタンをクリックします。(注意: この機能は既定では利用可能となっていないので、アイコンを表示させるのには設定で有効にしておく必要があります。)

レスポンシブデザインモードに切り替えます。

分割したコンソールを表示したり隠したりするドッキングに関するオプション、開発ツールの設定を含むメニューを開きます。メニューにはまた Firefox のウェブのツールや Mozilla Community の文書へのリンクも含みます。

開発ツールを閉じます。

ページインスペクター

すべてが新しい Firefox 57 のインスペクターパネル

ページの内容やレイアウトを、閲覧および編集します。ボックスモデル、アニメーション、グリッドレイアウトなど、さまざまな観点でページを視覚化します。

ウェブコンソール

すべてが新しい Firefox 57 のコンソール

ウェブページが記録したメッセージの閲覧や、JavaScriptを使用してページとやり取りします。

JavaScript デバッガー

すべてが新しい Firefox 57 の Debugger.html

ページで実行している JavaScript の停止、ステップ実行、調査、変更を行います。

ネットワークモニター

Firefox 57 開発ツールの Network panel

ページを読み込むときに実施したネットワークリクエストを確認します。

パフォーマンスツール

Firefox 57  開発ツールのパフォーマンスツール

サイトの全体的な応答性、JavaScript やレイアウトのパフォーマンスを分析します。

レスポンシブデザインモード

Firefox 57 のレスポンシブデザインモード

さまざまな端末やネットワークの環境で、あなたのウェブサイトやアプリがどのように見えるかや動作するかを確認します。

: 開発ツールの入っている UI の総称はツールボックスです。

その他のツール

これらの開発ツールも、Firefox に内蔵しています。上記の「主要ツール」とは異なり、日常的には使用しないかもしれません。

メモリー
どのオブジェクトがメモリーを使用し続けているかを明らかにします。
ストレージインスペクター
ページが保存した Cookie、Local Storage, IndexedDB、Session Storage を調査します。
DOM プロパティビューアー
ページの DOM 属性や関数などを調査します。
開発ツールバー
開発ツール用のコマンドラインインターフェイスです。
アクセシビリティインスペクター
ページのアクセシビリティツリーへのアクセス手段を提供し、何が足りないのかや注意が必要なのかを確認できるようにします。
スポイト
ページ内の色を選択します。
スクラッチパッド
JavaScript コードの記述や実行が可能な、Firefox 内蔵のテキストエディターです。
スタイルエディター
現在表示しているページの CSS スタイルの閲覧や編集を行います。
シェーダーエディター
WebGL で使用する頂点シェーダーとフラグメントシェーダーの閲覧や編集を行います。
Web Audio エディター
オーディオコンテキストでオーディオノードのグラフの調査や、それらのパラメーターの変更を行います。
スクリーンショットを撮影
ページ全体またはひとつの要素のスクリーンショットを撮影します。
ページの一部分を計測する
ウェブページの特定のエリアを計測します。
定規
ウェブページ上に水平、垂直な定規を重ねます。

 

最新の開発ツールと機能については、Firefox Developer Editionを試してみてください。

Firefox Developer Edition のダウンロード

 

 


開発ツールに接続する

キーボードショートカット や同等のメニュー項目を使用して開いた開発ツールは、現在アクティブなタブに表示しているドキュメントを対象にします。一方、現在開いているブラウザー、別のブラウザー、別の端末といった、さまざまな対象物に対してもツールを接続できます。

about:debugging
アドオン、コンテンツタブ、ブラウザーで実行する Worker をデバッグします。
Android 版 Firefox に接続する
Android 端末で実行している Firefox のインスタンスに、開発ツールを接続します。
iframe に接続する
現在のページ内の、特定の iframe に開発ツールを接続します。
ほかのブラウザーに接続する
Android 版 Chrome や iOS 版 Safari に、開発ツールを接続します。

ブラウザーのデバッグ

通常、開発ツールはウェブページ、またはウェブアプリに接続して利用します。しかしこれらのツールのほとんどは、ブラウザーへと接続することもできます。これはブラウザーやアドオンの開発に役立ちます。

ブラウザーコンソール
ブラウザー自体やアドオンが出力するログの確認や、ブラウザーのスコープ内での JavaScript 実行を行います。
ブラウザーツールボックス
開発ツールをブラウザー自体に接続します。

開発ツールの拡張

開発ツールは拡張できるように設計しています。Firefox アドオンは既存のツールを拡張したり新たなツールを追加するため、開発ツールやツールが使用するコンポーネントにアクセスできます。独自のデバッグクライアントやーサーバーに実装可能なリモートデバッグプロトコルによって、独自のツールを使用してウェブサイトのデバッグを行ったり、Firefox のツールを使用して別のターゲットのデバッグを行ったりすることが可能になります。

開発ツールのアドオンのサンプル
開発ツールのアドオンの実装方法を学ぶため、サンプルを使用しましょう。
開発ツールにパネルを追加する
ツールボックスにパネルを追加するアドオンを作成します。
リモートデバッグプロトコル
Firefox の開発ツールを Firefox のインスタンスや Firefox OS デバイスといったデバッグターゲットに接続するために使用するプロトコルです。
ソースエディター
アドオンに組み込むことが可能な、Firefox 内蔵のコードエディターです。
Debugger インターフェイス
他の JavaScript コードの実行を監視する JavaScript コードを実現する API です。Firefox 開発ツールでは、JavaScript デバッガーを実装するためにこの API を使用しています。
ウェブコンソールのカスタム出力
ウェブコンソール および ブラウザーコンソール の出力を拡張およびカスタマイズする方法です。

Firebug からの移行

Firebug は寿命が近づいています(理由の詳細については Firebug lives on in Firefox DevTools を参照してください)。人によってはあまり馴染みのない開発ツールへの移行に挑戦してくださっていることに感謝します。Firebug から Firefox 開発者ツールへ簡単に移行できるようにするため、私たちは便利なガイド「Firebug からの移行」書いています。


貢献

開発ツールの改良を支援したい場合は、以下のリソースから始めましょう。

Get Involved
始め方を解説した Mozilla wiki ページです。
firefox-dev.tools
作業中のバグを探せるツールです。

Developer toolsコミュニティに参加してください

あなたの好きな方法でディスカッションに参加してください