開発ツール
デスクトップとモバイルで、HTML と CSS と JavaScript を調査、編集、デバッグします。
Firefox で利用できるウェブ開発ツールを使う上での情報を探すのに、あなたはうってつけの場所に来ています — このページは主要ツールと追加ツールすべての詳細な情報、Android 用 Firefox への接続やデバッグのやり方といったより詳しい情報、開発ツールの拡張のやり方、ブラウザー全体のデバッグのやり方へのリンクを提供します。
サイドバーにあるリンクを探索して、ページまで読み進めてください。開発ツールに関してのフィードバックや質問があれば、我々のメーリングリストか IRC チャンネル (ページ最下部のコミュニティリンクをご覧ください) にメッセージを送ってください。もし文書に関しての明確なフィードバックや質問があれば、MDN discourse が投書するのに良いサイトです。注記: もしウェブ開発や開発ツールの使用について初心者ならば、ウェブ開発を学ぶ が役に立つでしょう — 良いスタートラインとして ウェブ入門 と ブラウザー開発者ツールとは? をご覧ください。
主要ツール
Windows と Linux では Ctrl + Shift + I 、OS X では Cmd + Opt + I で開くことができる開発者ツールバーの右側には、アクションを実行したり、ツールの設定を変更できるいくつかのボタンがあります。
![]() |
このボタンはページに複数の iframe があるときにだけ表示されます。現在のページにある iframe のリストを表示するためにクリックをし、動作させたいものを選択します。 |
![]() |
現在のページのスクリーンショットを撮影する場合にこのボタンをクリックします。(注意: この機能は既定では利用可能となっていないので、アイコンを表示させるのには設定で有効にしておく必要があります。) |
![]() |
レスポンシブデザインモードに切り替えます。 |
![]() |
分割したコンソールを表示したり隠したりするドッキングに関するオプション、開発ツールの設定を含むメニューを開きます。メニューにはまた Firefox のウェブのツールや Mozilla Community の文書へのリンクも含みます。 |
![]() |
開発ツールを閉じます。 |
注: 開発ツールの入っている UI の総称はツールボックスです。
アクセシビリティインスペクタ
メモ: DevTools がすべてその中にある UI の総称は、ツールボックスです。
その他のツール
これらの開発ツールも、Firefox に内蔵しています。上記の「主要ツール」とは異なり、日常的には使用しないかもしれません。
- メモリー
- どのオブジェクトがメモリーを使用し続けているかを明らかにします。
- ストレージインスペクター
- ページが保存した Cookie、Local Storage, IndexedDB、Session Storage を調査します。
- DOM プロパティビューアー
- ページの DOM 属性や関数などを調査します。
- 開発ツールバー
- 開発ツール用のコマンドラインインターフェイスです。
- アクセシビリティインスペクター
- ページのアクセシビリティツリーへのアクセス手段を提供し、何が足りないのかや注意が必要なのかを確認できるようにします。
- スポイト
- ページ内の色を選択します。
- スクラッチパッド
- JavaScript コードの記述や実行が可能な、Firefox 内蔵のテキストエディターです。
- スタイルエディター
- 現在表示しているページの CSS スタイルの閲覧や編集を行います。
- シェーダーエディター
- WebGL で使用する頂点シェーダーとフラグメントシェーダーの閲覧や編集を行います。
- Web Audio エディター
- オーディオコンテキストでオーディオノードのグラフの調査や、それらのパラメーターの変更を行います。
- スクリーンショットを撮影
- ページ全体またはひとつの要素のスクリーンショットを撮影します。
- ページの一部分を計測する
- ウェブページの特定のエリアを計測します。
- 定規
- ウェブページ上に水平、垂直な定規を重ねます。
開発ツールに接続する
キーボードショートカット や同等のメニュー項目を使用して開いた開発ツールは、現在アクティブなタブに表示しているドキュメントを対象にします。一方、現在開いているブラウザー、別のブラウザー、別の端末といった、さまざまな対象物に対してもツールを接続できます。
- about:debugging
- アドオン、コンテンツタブ、ブラウザーで実行する Worker をデバッグします。
- Android 版 Firefox に接続する (en-US)
- Android 端末で実行している Firefox のインスタンスに、開発ツールを接続します。
- iframe に接続する
- 現在のページ内の、特定の iframe に開発ツールを接続します。
- ほかのブラウザーに接続する
- Android 版 Chrome や iOS 版 Safari に、開発ツールを接続します。
ブラウザーのデバッグ
通常、開発ツールはウェブページ、またはウェブアプリに接続して利用します。しかしこれらのツールのほとんどは、ブラウザーへと接続することもできます。これはブラウザーやアドオンの開発に役立ちます。
- ブラウザーコンソール
- ブラウザー自体やアドオンが出力するログの確認や、ブラウザーのスコープ内での JavaScript 実行を行います。
- ブラウザーツールボックス
- 開発ツールをブラウザー自体に接続します。
開発ツールの拡張
Firebug からの移行
Firebug は寿命が近づいています(理由の詳細については Firebug lives on in Firefox DevTools を参照してください)。人によってはあまり馴染みのない開発ツールへの移行に挑戦してくださっていることに感謝します。Firebug から Firefox 開発者ツールへ簡単に移行できるようにするため、私たちは便利なガイド「Firebug からの移行」書いています。
貢献
開発ツールの改良を支援したい場合は、以下のリソースから始めましょう。
- Get Involved
- 始め方を解説した Mozilla wiki ページです。
- firefox-dev.tools
- 作業中のバグを探せるツールです。