開発ツール

作成

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

スクラッチパッド

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

スタイルエディタ

カレントページの CSS スタイルの閲覧や編集を行います。

シェーダエディタ

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

Web Audio エディタ

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

調査とデバッグ

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

Web コンソール

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

インスペクタ

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

JavaScript デバッガ

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

ネットワークモニタ

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

ストレージインスペクタ

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

開発ツールバー

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

3D ビュー

ページを 3D で視覚化します。

スポイト

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

iframe での作業

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

モバイル

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

アプリマネージャ

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

WebIDE

アプリマネージャを置き換えるものであり、Firefox 33 以降で使用できます。

Firefox OS Simulator

Firefox OS デバイスの実機を必要とせずに、デスクトップ環境で Firefox OS アプリの実行とデバッグを行います。

レスポンシブデザインビュー

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

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

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

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

Firebug

とても有名で強力な Web 開発ツールであり、JavaScript デバッガ、HTML および CSS のビューアとエディタ、そしてネットワークモニターを含んでいます。

DOM Inspector

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

Web Developer

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

Webmaker Tools

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

W3C Validators

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

JSHint

JavaScript コードを分析するツールです。