開発者ツールを巡る旅（その2）「Firefox 開発ツール」

前回のGoogle Chrome DevToolsに続いて、今回はFirefoxの提供する開発ツールについて見ていきます。元々この手のツールが注目を浴びたのはFirefoxアドオンだったFirebugが最初だったのではないでしょうか。それもあってかFirefoxの提供する開発者ツールは細かい点まで気が配られた、とても使い勝手の良い機能となっています。

Firefox Developer Edition — Mozilla

Firefoxの種類について

Firefoxには2つの種類があります。一つは一般ユーザ向けのFirefoxで、もう一つはWeb開発者をターゲットにしたFirefox Developer Editionになります。Firefox Developer Editionは標準のFirefoxをベースに、開発に役立つアドオンがインストールされているものになります。今回はそのFirefox Developer Editionをベースにしていきます。

開発ツールの起動

開発ツールはツールメニューまたはWindows/LinuxであればCtrl + Shift + I、Mac OSXではコマンド + Opt + Iで起動します。開発ツールは実に多機能で、設定から表示するタブを切り替えられるくらいです。

UIの設計、確認が容易なインスペクタ

まず基本となるインスペクタです。DOM構造やスタイル設定などが確認できます。

該当部分のDOMはハイライト表示されるのでわかりやすいです。

スタイルを一時的に変更して表示確認もできます。

HTMLについても編集できます。

スタイルの変更などはその場で反映されます。

JavaScriptのデバッグ、確認に便利なコンソール

こちらもインスペクタ同様によく使われる機能だと思います。

補完も行われるので便利です。ちょっとしたコードを試したり、変数の状態を調べるのに使えます。

さらにユニークな機能としてファイルの切り替えがあります。iframeで読み込まれているソーシャルボタンなど、外部サイトの解析を行う際に対象ファイルを切り替えることができます。

もちろんスマートフォン向けの画面サイズで確認するといったシミュレーション機能もあります。

JavaScriptのデバッグに使えるデバッガ

読み込まれているコードのデバッグに使うのはデバッガタブです。

ブレークポイントを設定したり、ウォッチを入れることができます。同時にコンソールを使うこともできます。

スタイルシートの設定を確認するのに使えるとスタイルエディタ

インスペクタではマウスを当てたDOMのスタイルを確認する方法でしたが、スタイルエディタでは個々のファイルに対する全体の設定を確認できます。ここで修正した内容はそのまま反映されますし、保存ボタンを押してダウンロードすることもできます。

HTML/JavaScriptのパフォーマンスチェックにPerformance

Performanceタブはそのままで、Webアプリケーション全体のパフォーマンスをチェックできます。

DOMイベントにかかった時間を見たり、JavaScriptで時間のかかっている処理を確認するのが便利です。グラフで見たり、一覧表で確認することもできます。

JavaScriptについてだけ掘り下げてみることもできます。

通信内容を確認するネットワーク

ネットワークタブでは接続した情報を確認できます。

ヘッダ情報などを編集してその場で再実行できる機能が便利です。

テキストエリアを使って内容を編集したり、コピーして別なツールで使ったりするのもよくあるニーズと言えそうです。

Canvas処理の内容を確認

Firefoxだけではないかと思われる機能がCanvasの解析です。今後アニメーションコンテンツが増えていく中でかなり役立つのではないでしょうか。

細かく処理を追いかけられるようになっています。

Web Audioにも対応

他にもWeb Audioについてもビジュアル化させることができます。開発ツール上からプロパティの値を変更して、ピッチを変えたりすることができます。

ストレージの中身をビジュアル化

ストレージタブを使えばCookie、セッションストレージ、IndexedDBなどの値を表形式で閲覧できます。

開発ツールの使い方を学べる

Firefox Developer EditionのサイトではDevTools Challengerというコンテンツを用意しています。これは深海へ潜行していくのを通じて開発ツールの使い方を学んでいくコンテンツです。

やるべきミッションが書かれていますので、それをこなすとさらに潜行（スクロールしていく）といったゲーム形式で開発ツールの使い方を習得できるようになっています。

こんな感じでアニメーション速度をビジュアル的に変えられる、なんてマニアックな機能も覚えられます。

コンテンツは英語ですが、そんなに難しい言葉はありませんし、動画をみて操作を確認できます。Firefoxの開発ツールでどんなことができるのか、まずはDevTools Challengerを使って覚えるのがお勧めです。

---

Firefox Developer Editionは開発者向けとあって、多くの開発時に役立つのでは機能が用意されています。他にもWeb IDE（まだIDEと呼ぶには機能不足感はありますが）もあり、Web開発を行う方にとって強力なツールになるのではないでしょうか。

Firefox Developer Edition — Mozilla