アプリ開発ツール

Firefox の開発ツール

Firefox には、素早く効率的な素晴らしい開発体験を提供するため、新たに作り出された一連の開発者向けツールが標準装備されています (これは ツールボックス とも呼ばれ、Mac では Cmd + Opt + I、Windows/Linux では Ctrl + Shift + I でアクセス可能です)。これには、以下のように、Web コンテンツのデバッグに必要なツールがすべて含まれています。

Web コンソール

ネットワーク要求、コード内のエラーと警告を含め、Web ページの実行に関連付けられた有益な情報を記録するとともに、ページの現在のコンテキスト内で JavaScript 式を即座に実行できます。

JavaScript デバッガ

JavaScript コードに踏み込んで、その状態を調査もしくは変更してバグの原因を突き止めるのに役立ちます。

ページインスペクタ

ページの構造とレイアウトを調査、変更できます。

スタイルエディタ

ページに関連付けられたすべてのスタイルシートを表示、編集したり、まったく新しいスタイルシートを作成したり、既存のスタイルシートをインポートしてページへ適用したりできます。

プロファイラ

JavaScript コード内のボトルネックを発見できます。実行中の JavaScript コールスタックを定期的にサンプリングし、その内容にから統計情報を出力します。

ネットワークモニタ

Firefox が行うすべてのネットワーク要求 (例えば、ページの読み込み時や XMLHttpRequest によるもの)、各要求に掛かった時間、その他詳細を表示します。

モバイルツール

以下は、Firefox OS 上の Gecko を含め、モバイルブラウザを考慮に入れてアプリを開発する際に役立ついくつかのツールです。

Firefox OS アプリマネージャ

Firefox OS 端末やシミュレーター上で動作している HTML5 Web アプリのテスト、配布、デバッグに役立つ、ブラウザ内で直接利用できる便利なツールをいくつも提供します。Firefox OS 1.2 以上で動作します。

Firefox OS シミュレータ

Firefox OS アプリのテストやデバッグを行えるデスクトップ版 Firefox 向けアドオンです。アプリマネージャよりも機能は限られており、主に Firefox OS の古いバージョン (1.2 未満) でデバッグを行いたい場合に役立ちます。

リモートデバッグ

デスクトップやノートパソコンからモバイル端末へ接続した上で、デスクトップ上で Firefox のツールボックスを使って、モバイル上で動作しているコードをリモートからデバッグできます。

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

Web サイトや Web アプリが異なる画面サイズでどのように見えるか簡単にチェックできます。現在普及している端末で一般的に利用されている様々な解像度に合わせてアプリを表示したり、ユーザ定義解像度を入力してテストしたり、画面の向きを変更して端末がどのように反応するか理解を深めることが可能です。

アプリバリデータ

アプリマニフェストの場所を入力することで、パッケージ型あるいはホスト型 Firefox OS アプリを検証できます。

Firefox OS アプリジェネレータ

この Firefox OS アプリジェネレーターを使えば、特定の許可設定、メッセージリスナー、タイプなどを備えた Firefox OS アプリを自動的に生成、インストールできます。

関連記事

MDN の ツールゾーン では、これらのツールの使い方を含め、より詳しい情報を提供しています。