開発ツール

作成

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

スクラッチパッド

JavaScript コードの記述や実行が可能な、Firefox 内蔵のテキストエディターです。

スタイルエディター

現在表示しているページの CSS スタイルの閲覧や編集を行います。

シェーダエディター

WebGLで使用する頂点シェーダとフラグメントシェーダの閲覧や編集を行います。

Web Audio エディター

オーディオコンテキストでオーディオノードのグラフの調査や、それらのパラメーターの変更を行います。

調査とデバッグ

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

コンソール

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

インスペクター

ページの HTML や CSS を、閲覧および編集します。

JavaScript デバッガー

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

ネットワークモニター

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

ストレージインスペクター

ページが保存した Cookie、Local Storage, IndexedDB、Session Storage を調査します。

DOM インスペクター

ページの DOM 属性や関数などを調査できます。

開発ツールバー

開発ツール用のコマンドラインインターフェイスです。

リモートデバッガー

別のマシンで動作している Firefox に接続して、デバッグを行います。

スポイト

ページ内の色を選択します。

about:debugging

アドオンや Worker をデバッグするためのダッシュボードです。

iframe での作業

特定の iframe を対象にする方法です。

モバイル

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

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

異なるスクリーンサイズの環境であなたのウェブサイトやアプリがどのように見えるかを、ブラウザーウィンドウのサイズを変えることなく確認できます。

アプリマネージャー

アプリマネージャーは WebIDE に置き換えられました。

WebIDE

Firefox OS シュミレーター や Firefox OS デバイスを使用して、ウェブアプリの作成、編集、実行、デバッグを行うことができます。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

ページ内で、イベントに応じて再描画された部分をハイライトします。

リフローイベントのログ記録

コンソールでリフローイベントを確認します。

ネットワークパフォーマンス

サイトのパーツの読み込みにどれだけ時間がかかるかを確認します。

ブラウザーのデバッグ

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

ブラウザーコンソール

ブラウザー自体やアドオンが出力するログの確認や、ブラウザーのスコープ内での JavaScript 実行を行います。

ブラウザーツールボックス

開発ツールをブラウザー自体に接続します。

開発ツールの拡張

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

開発ツールにパネルを追加する

ツールボックスにパネルを追加するアドオンを作成します。

リモートデバッグプロトコル

Firefox の開発ツールを Firefox のインスタンスや Firefox OS デバイスといったデバッグターゲットに接続するために使用するプロトコルです。

ソースエディター

アドオンに組み込むことが可能な、Firefox 内蔵のコードエディターです。

Debugger インターフェイス

他の JavaScript コードの実行を監視する JavaScript コードを実現する API です。Firefox 開発ツールでは、JavaScript デバッガーを実装するためにこの API を使用しています。

ウェブコンソールのカスタム出力

ウェブコンソール および ブラウザーコンソール の出力を拡張およびカスタマイズする方法です。

開発ツールのアドオンのサンプル

開発ツールのアドオンの実装方法を学ぶため、サンプルを使用しましょう。

---

開発ツールの開発

開発ツールの開発には、いくつかの始め方があります。

Get Involved

始め方を解説した Mozilla wiki ページです。

firefox-dev.tools

作業中のバグを探せるツールです。

Firebug

とても有名で強力なウェブ開発ツールであり、JavaScript デバッガー、HTML および CSS のビューアーとエディター、そしてネットワークモニターを含んでいます (Firebug は Firefox 49 以降は標準の開発ツールに 統合されました)。

DOM Inspector

ウェブページや XUL ウィンドウの DOM を調査および閲覧、編集するツールです。

Web Developer

ブラウザーに、さまざまな Web 開発ツールのメニューやツールバーを追加します。

Webmaker Tools

ウェブ開発を始める人々を対象にした、Mozilla が開発したツールのセットです。

W3C Validators

W3C のウェブサイトでは、あなたのウェブサイトの HTML や CSS などの正当性を確認するツールをいくつか運用しています。

ESLint

JavaScript の文法チェックと、コード解析を行うツールです。