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

あなたのアイデアをシェアしましょう

開発ツールの新機能を依頼、または他の開発者が希望しているアイデアに投票しましょう。

作成

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

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

調査とデバッグ

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

Web コンソール
Web ページが記録したメッセージの閲覧や、JavaScript を使用してページとの対話を行います。
インスペクタ
ページの HTML や CSS を、閲覧および編集します。
JavaScript デバッガ
ページで実行している JavaScript の停止、ステップ実行、調査、変更を行います。
ネットワークモニタ
ページを読み込むときに実施したネットワーク要求を確認します。
開発ツールバー
開発ツール用のコマンドラインインターフェイスです。
3D ビュー
ページを 3D で視覚化します。
スポイト
ページ内の色を選択します。

モバイル

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

アプリマネージャ
Firefox OS 向けアプリの設計と開発を行います。
Firefox OS Simulator
Firefox OS デバイスの実機を必要とせずに、デスクトップ環境で Firefox OS アプリの実行とデバッグを行います。
レスポンシブデザインビュー
異なるスクリーンサイズの環境であなたの Web サイトやアプリがどのように見えるかを、ブラウザウィンドウのサイズを変えることなく確認できます。
Android 版 Firefox でのデバッグ
Android 版 Firefox に開発ツールを接続します。

パフォーマンス

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

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 のビューアとエディタ、そしてネットワークモニターを含んでいます。
DOM Inspector
Web ページや XUL ウィンドウの DOM を調査および閲覧、編集するツールです。
Web Developer
ブラウザに、さまざまな Web 開発ツールのメニューやツールバーを追加します。
Webmaker Tools
Web 開発を始める人々を対象にした、Mozilla が開発したツールのセットです。
W3C Validators
W3C の Web サイトでは、あなたの Web サイトの HTMLCSS などの正当性を確認するツールをいくつか運用しています。
JSHint
JavaScript コードを分析するツールです。

Join the Developer tools community