開発ツール

デスクトップおよびモバイル環境で HTML、CSS、JavaScript の調査、編集、デバッグを行います。

Firefox Developer Edition の新機能

Firefox Developer Edition は開発者向けに作られた Firefox であり、Firefox の最新機能や実験的な開発ツールを搭載していることが特徴です。現在の Developer Edition では、開発ツールに関して以下のアップデートが含まれています:

作成

Web サイトや Web アプリのオーサリングツールです。

スクラッチパッド: JavaScript コードの記述や実行が可能な、Firefox 内蔵のテキストエディタです。
スタイルエディタ: カレントページの CSS スタイルの閲覧や編集を行います。
シェーダエディタ: WebGLで使用するバーテックスシェーダとフラグメントシェーダの閲覧や編集を行います。
Web Audio エディタ: オーディオコンテキストでオーディオノードのグラフの調査や、それらのパラメータの変更を行います。

調査とデバッグ

Web サイトや Web アプリの実行、調査、デバッグを行います。

コンソール: Web ページが記録したメッセージの閲覧や、JavaScript を使用してページとの対話を行います。
インスペクタ: ページの HTML や CSS を、閲覧および編集します。
JavaScript デバッガ: ページで実行している JavaScript の停止、ステップ実行、調査、変更を行います。
ネットワークモニタ: ページを読み込むときに実施したネットワーク要求を確認します。
ストレージインスペクタ: ページが保存した Cookie、Local Storage, IndexedDB、Session Storage を調査します。
DOM インスペクタ: ページの DOM 属性や関数などを調査できます。
開発ツールバー: 開発ツール用のコマンドラインインターフェイスです。
スポイト: ページ内の色を選択します。
about:debugging: アドオンや Worker をデバッグするためのダッシュボードです。
iframe での作業: 特定の iframe を対象にする方法です。

モバイル

モバイル開発向けのツールです。

レスポンシブデザインモード: 異なるスクリーンサイズの環境であなたの Web サイトやアプリがどのように見えるかを、ブラウザウィンドウのサイズを変えることなく確認できます。
アプリマネージャ: アプリマネージャは WebIDE に置き換えられました。
WebIDE: Firefox OS シミュレータや Firefox OS デバイスを使用して、Web アプリの作成、編集、実行、デバッグを行うことができます。WebIDE はアプリマネージャを置き換えるものであり、Firefox 33 以降で使用できます。
Firefox OS シミュレータ: Firefox OS デバイスの実機を必要とせずに、デスクトップ環境で Firefox OS アプリの実行とデバッグを行います。
Android 版 Firefox でのデバッグ: Android 版 Firefox に開発ツールを接続します。
WebIDE による Android 版 Firefox のデバッグ: デスクトップ版 Firefox 36 以降 / Android 版 Firefox 35 以降で、手順がシンプルになりました。
Valence: Android 版 Chrome や iOS 版 Safari に、開発ツールを接続します。

パフォーマンス

パフォーマンスの問題を診断および修正します。

パフォーマンスツール: サイトの全体的な応答性、JavaScript やレイアウトのパフォーマンスを分析します。
メモリ: どのオブジェクトがメモリを使用し続けているかを明らかにします。
フレームレートグラフ: サイトのフレームレートを確認します。
タイムライン: サイトを実行しているときに、ブラウザが何を行っているかを明らかにします。
呼び出しツリー: JavaScript コードのどこで時間がかかっているかを明らかにします。
フレームチャート: パフォーマンスプロファイル内で、スタックにどの関数が存在するかを確認します。
Paint Flashing Tool: ページ内で、イベントに応じて再描画された部分をハイライトします。
リフローイベントのログ記録: コンソールでリフローイベントを確認します。
ネットワークパフォーマンス: サイトのパーツの読み込みにどれだけ時間がかかるかを確認します。

ブラウザのデバッグ

デフォルトでは、開発ツールは Web ページまたは Web アプリに接続します。一方、これらのツールは全体的にブラウザへ接続することもできます。これはブラウザやアドオンの開発に役立ちます

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

開発ツールの拡張

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

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

その他の情報

このセクションでは、現在は Mozilla の開発ツールチームでメンテナンスしていませんが Web 開発者によって広く使用されているリソースを紹介します。このリストには Firefox のアドオンをいくつか含めていますが、完全なリストについては addons.mozilla.org の "Web 開発" カテゴリをご覧ください。

Firebug: とても有名で強力な Web 開発ツールであり、JavaScript デバッガ、HTML および CSS のビューアとエディタ、そしてネットワークモニタを含んでいます (Firebug は Firefox 49 以降は標準の開発ツールに統合されました)。
DOM Inspector: Web ページや XUL ウィンドウの DOM を調査および閲覧、編集するツールです。
Web Developer: ブラウザに、さまざまな Web 開発ツールのメニューやツールバーを追加します。

Webmaker Tools: Web 開発を始める人々を対象にした、Mozilla が開発したツールのセットです。
W3C Validators: W3C の Web サイトでは、あなたの Web サイトの HTML や CSS などの正当性を確認するツールをいくつか運用しています。
JSHint: JavaScript コードを分析するツールです。

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

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

IRC: #devtools (さらに詳しく)
Team info: Dev tools wiki
Blog: Hacks blog