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

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

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

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

主要ツール

開発ツールバーの右側には動作を行ったりツールの設定を変更したりするためのいくつかのボタンが含まれています。

このボタンはページに複数の 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 のレスポンシブデザインモード

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


その他のツール

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

メモリー
どのオブジェクトがメモリーを使用し続けているかを明らかにします。
ストレージインスペクター
ページが保存した Cookie、Local Storage, IndexedDB、Session Storage を調査します。
DOM プロパティビューアー
ページの DOM 属性や関数などを調査します。
開発ツールバー
開発ツール用のコマンドラインインターフェイスです。
スポイト
ページ内の色を選択します。
スクラッチパッド
JavaScript コードの記述や実行が可能な、Firefox 内蔵のテキストエディターです。
スタイルエディター
現在表示しているページの CSS スタイルの閲覧や編集を行います。
シェーダーエディター
WebGL で使用する頂点シェーダーとフラグメントシェーダーの閲覧や編集を行います。
Web Audio エディター
オーディオコンテキストでオーディオノードのグラフの調査や、それらのパラメーターの変更を行います。
スクリーンショットを撮影
ページ全体またはひとつの要素のスクリーンショットを撮影します。

 

For the latest developer tools and features, try Firefox Developer Edition.

Download 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コミュニティに参加してください

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

ドキュメントのタグと貢献者

最終更新者: kenji-yamasaki,