We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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


 

最新の開発ツールと機能については、 Firefox Developer Edition を使用してみてください。

Firefox Developer Edition をダウンロード

 

主要ツール

ページインスペクター

すべてが新しい Firefox 57 のインスペクターパネル

ページの内容やレイアウトを、閲覧および編集します。ボックスモデル、アニメーション、グリッドレイアウトなど、さまざまな観点でページを視覚化します。

ウェブコンソール

すべてが新しい Firefox 57 のコンソール

ウェブページが記録したメッセージの閲覧や、JavaScript を使用してページとの対話を行います。

JavaScript デバッガー

すべてが新しい Firefox 57 の Debugger.html

ページで実行している JavaScript の停止、ステップ実行、調査、変更を行います。

ネットワークモニター

Firefox 57 開発ツールの Network panel

ページを読み込むときに実施したネットワーク要求を確認します。

パフォーマンスツール

サイトの全体的な応答性、JavaScript やレイアウトのパフォーマンスを分析します。

レスポンシブデザインモード

Firefox 57 のレスポンシブデザインモード

さまざまな端末やネットワークの環境で、あなたのウェブサイトやアプリがどのように見えるかや動作するかを確認します。


その他のツール

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

メモリー
どのオブジェクトがメモリを使用し続けているかを明らかにします。
ストレージインスペクター
ページが保存した Cookie、Local Storage, IndexedDB、Session Storage を調査します。
DOM プロパティビューアー
ページの DOM 属性や関数などを調査します。
開発ツールバー
開発ツール用のコマンドラインインターフェイスです。
スポイト
ページ内の色を選択します。
スクラッチパッド
JavaScript コードの記述や実行が可能な、Firefox 内蔵のテキストエディターです。
スタイルエディター
現在表示しているページの CSS スタイルの閲覧や編集を行います。
シェーダーエディター
WebGL で使用する頂点シェーダーとフラグメントシェーダーの閲覧や編集を行います。
Web Audio エディター
オーディオコンテキストでオーディオノードのグラフの調査や、それらのパラメーターの変更を行います。
スクリーンショットを撮影
ページ全体またはひとつの要素のスクリーンショットを撮影します。

 

See what your users see in their browsers. Test your sites in up to 800 browser and OS combinations with our cross-browser testing tutorial.

Made just for you by Mozilla and Sauce labs.


開発ツールに接続する

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

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 を使用しています。
ウェブコンソールのカスタム出力
ウェブコンソール および ブラウザーコンソール の出力を拡張およびカスタマイズする方法です。

Firebug からの移行

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


貢献

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

Get Involved
始め方を解説した Mozilla wiki ページです。
firefox-dev.tools
作業中のバグを探せるツールです。

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

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

ドキュメントのタグと貢献者

最終更新者: mfuji09,