デスクトップとモバイルで、HTML と CSS と JavaScript を調査、編集、デバッグします。
Firefox で利用できるウェブ開発ツールを使う上での情報を探すのに、あなたはうってつけの場所に来ています — このページは主要ツールと追加ツールすべての詳細な情報、Android 用 Firefox への接続やデバッグのやり方といったより詳しい情報、開発ツールの拡張のやり方、ブラウザー全体のデバッグのやり方へのリンクを提供します。
サイドバーにあるリンクを探索して、ページまで読み進めてください。開発ツールに関してのフィードバックや質問があれば、我々のメーリングリストか IRC チャンネル (ページ最下部のコミュニティリンクをご覧ください) にメッセージを送ってください。もし文書に関しての明確なフィードバックや質問があれば、MDN discourse が投書するのに良いサイトです。注記: もしウェブ開発や開発ツールの使用について初心者ならば、ウェブ開発を学ぶ が役に立つでしょう — 良いスタートラインとして ウェブ入門 と ブラウザー開発者ツールとは？ をご覧ください。
Windows と Linux では Ctrl + Shift + I 、OS X では Cmd + Opt + I で開くことができる開発者ツールバーの右側には、アクションを実行したり、ツールの設定を変更できるいくつかのボタンがあります。
 |
このボタンはページに複数の iframe があるときにだけ表示されます。現在のページにある iframe のリストを表示するためにクリックをし、動作させたいものを選択します。 |
 |
現在のページのスクリーンショットを撮影する場合にこのボタンをクリックします。(注意: この機能は既定では利用可能となっていないので、アイコンを表示させるのには設定で有効にしておく必要があります。) |
 |
レスポンシブデザインモードに切り替えます。 |
 |
分割したコンソールを表示したり隠したりするドッキングに関するオプション、開発ツールの設定を含むメニューを開きます。メニューにはまた Firefox のウェブのツールや Mozilla Community の文書へのリンクも含みます。 |
 |
開発ツールを閉じます。 |
ページで実行している JavaScript の停止、ステップ実行、調査、変更を行います。
さまざまな端末やネットワークの環境で、あなたのウェブサイトやアプリがどのように見えるかや動作するかを確認します。
注: 開発ツールの入っている UI の総称はツールボックスです。
ページのアクセシビリティツリーにアクセスする手段を提供し、欠落しているものや注意が必要なものを確認することができます。
メモ: DevTools がすべてその中にある UI の総称は、ツールボックスです。
これらの開発ツールも、Firefox に内蔵しています。上記の「主要ツール」とは異なり、日常的には使用しないかもしれません。
キーボードショートカット や同等のメニュー項目を使用して開いた開発ツールは、現在アクティブなタブに表示しているドキュメントを対象にします。一方、現在開いているブラウザー、別のブラウザー、別の端末といった、さまざまな対象物に対してもツールを接続できます。
通常、開発ツールはウェブページ、またはウェブアプリに接続して利用します。しかしこれらのツールのほとんどは、ブラウザーへと接続することもできます。これはブラウザーやアドオンの開発に役立ちます。
Firefox 開発ツールの拡張についての情報は、MDN のブラウザー拡張機能セクションの開発ツールの拡張 を見てください。
Firebug は寿命が近づいています（理由の詳細については Firebug lives on in Firefox DevTools を参照してください）。人によってはあまり馴染みのない開発ツールへの移行に挑戦してくださっていることに感謝します。Firebug から Firefox 開発者ツールへ簡単に移行できるようにするため、私たちは便利なガイド「Firebug からの移行」書いています。
開発ツールの改良を支援したい場合は、以下のリソースから始めましょう。
