開発ツール

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

主要ツール

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

	このボタンはページに複数の iframe があるときにだけ表示されます。現在のページにある iframe のリストを表示するためにクリックをし、動作させたいものを選択します。
	現在のページのスクリーンショットを撮影する場合にこのボタンをクリックします。(注意: この機能は基本的には利用可能となっていないのでアイコンを表示させるのには設定で有効にする必要があります。)
	レスポンシブデザインモードに切り替えます。
	分割したコンソールを表示したり隠したりするドッキングに関するオプション、開発ツールの設定を含むメニューを開きます。メニューにはまた Firefox のウェブのツールや Mozilla Community の文書へのリンクも含みます。
	開発ツールを閉じます。

その他のツール

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

開発ツールに接続する

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

ブラウザーのデバッグ

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

開発ツールの拡張

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

Firebug からの移行

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

貢献

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