デスクトップとモバイルで、HTML・CSS・JavaScript を調査、編集、デバッグします。最新の開発ツールのアップデートについては、Firefox Developer Edition をダウンロードします。
主要ツール
ページインスペクター
ページの内容やレイアウトを、閲覧および編集します。ボックスモデル、アニメーション、グリッドレイアウトなど、さまざまな観点でページを視覚化します。
ウェブコンソール
ウェブページが記録したメッセージの閲覧や、JavaScript を使用してページとの対話を行います。
JavaScript デバッガー
ページで実行している JavaScript の停止、ステップ実行、調査、変更を行います。
ネットワークモニター
ページを読み込むときに実施したネットワーク要求を確認します。
パフォーマンスツール
サイトの全体的な応答性、JavaScript やレイアウトのパフォーマンスを分析します。
レスポンシブデザインモード
さまざまな端末やネットワークの環境で、あなたのウェブサイトやアプリがどのように見えるかや動作するかを確認します。
さらに多くのツール
これらの開発ツールも、Firefox に内蔵しています。上記の "主要ツール" とは異なり、日常的には使用しないかもしれません。
- メモリー
- どのオブジェクトがメモリを使用し続けているかを明らかにします。
- ストレージインスペクター
- ページが保存した Cookie、Local Storage, IndexedDB、Session Storage を調査します。
- DOM プロパティビューアー
- ページの DOM 属性や関数などを調査します。
- 開発ツールバー
- 開発ツール用のコマンドラインインターフェイスです。
- スポイト
- ページ内の色を選択します。
- スクラッチパッド
- JavaScript コードの記述や実行が可能な、Firefox 内蔵のテキストエディターです。
- スタイルエディター
- 現在表示しているページの CSS スタイルの閲覧や編集を行います。
- シェーダーエディター
- WebGL で使用する頂点シェーダーとフラグメントシェーダーの閲覧や編集を行います。
- Web Audio エディター
- オーディオコンテキストでオーディオノードのグラフの調査や、それらのパラメーターの変更を行います。
- スクリーンショットを撮影
- ページ全体またはひとつの要素のスクリーンショットを撮影します。
開発ツールに接続する
キーボードショートカット や同等のメニュー項目を使用して開いた開発ツールは、現在アクティブなタブに表示しているドキュメントを対象にします。一方、現在開いているブラウザー、別のブラウザー、別の端末といった、さまざまな対象物に対してツールを接続することもできます。
- about:debugging
- アドオン、コンテンツタブ、ブラウザーで実行する Worker をデバッグします。
- Android 版 Firefox に接続する
- Android 端末で実行している Firefox のインスタンスに、開発ツールを接続します。
- iframe に接続する
- 現在のページ内の、特定の iframe に開発ツールを接続します。
- ほかのブラウザーに接続する
- Android 版 Chrome や iOS 版 Safari に、開発ツールを接続します。
ブラウザーのデバッグ
通常、開発ツールはウェブページ、またはウェブアプリに接続して利用します。しかしこれらのツールのほとんどは、ブラウザーへと接続することもできます。これはブラウザーやアドオンの開発に役立ちます。
- ブラウザーコンソール
- ブラウザー自体やアドオンが出力するログの確認や、ブラウザーのスコープ内での JavaScript 実行を行います。
- ブラウザーツールボックス
- 開発ツールをブラウザー自体に接続します。
開発ツールの拡張
開発ツールは拡張できるように設計しています。Firefox アドオンは既存のツールを拡張したり新たなツールを追加するため、開発ツールやツールが使用するコンポーネントにアクセスできます。独自のデバッグクライアントやーサーバに実装可能なリモートデバッグプロトコルによって、独自のツールを使用してウェブサイトのデバッグを行ったり、Firefox のツールを使用して別のターゲットのデバッグを行ったりすることが可能になります。
- 開発ツールのアドオンのサンプル
- 開発ツールのアドオンの実装方法を学ぶため、サンプルを使用しましょう。
- 開発ツールにパネルを追加する
- ツールボックスにパネルを追加するアドオンを作成します。
- リモートデバッグプロトコル
- Firefox の開発ツールを Firefox のインスタンスや Firefox OS デバイスといったデバッグターゲットに接続するために使用するプロトコルです。
- ソースエディター
- アドオンに組み込むことが可能な、Firefox 内蔵のコードエディターです。
Debuggerインターフェイス- 他の JavaScript コードの実行を監視する JavaScript コードを実現する API です。Firefox 開発ツールでは、JavaScript デバッガーを実装するためにこの API を使用しています。
- ウェブコンソールのカスタム出力
- ウェブコンソール および ブラウザーコンソール の出力を拡張およびカスタマイズする方法です。
貢献
開発ツールの改良を支援したい場合は、以下のリソースから始めましょう。
- Get Involved
- 始め方を解説した Mozilla wiki ページです。
- firefox-dev.tools
- 作業中のバグを探せるツールです。
Developer toolsコミュニティに参加してください
- IRC: #devtools (さらに詳しく)
- Team info: Dev tools wiki
- Blog: Hacks blog