Firefoxで使えるWeb開発用のツールといえば、Firebugが有名です。FirebugはFirefoxのアドオンとして提供されており、利用するためには追加のインストールが必要です。ところで、インストールの必要がない開発ツールがFirefoxに付属していることをご存知でしたか？
今回から3回にわたって、Firefoxに標準付属の開発ツールをご紹介します。初回は開発ツールの持っている機能を概観します。
起動方法
まずは起動方法からご説明します。画面の左上にあるハンバーガーアイコンをクリックして表示されるメニューの中に開発ツールがあります。これをクリックすると、メニューがスライドします。この中から「開発ツールを表示」を選ぶと開発ツールが起動します。
起動すると以下のような画面が表示されます。上部にあるタブを切り替えることで、個々の機能を利用できます。
タブの左右にはいくつかのボタンが配置されています。設定に関するものは左側、機能に関するものは右側にまとめられています。
開発ツールの持つ機能
開発ツールはさまざまな機能を持っています。
| カテゴリ | 機能 |
|---|---|
| コンテンツの作成 | スクラッチパッド,スタイルエディタ |
| 調査とデバッグ | Webコンソール,ページインスペクタ,JavaScriptデバッガ,ネットワークモニタ,開発ツールバー,3Dビュー |
| モバイル開発 | アプリマネージャ,Firefox OSシミュレータ,レスポンシブデザインビュー,リモートデバッガ |
| パフォーマンスチューニング | JavaScript プロファイラ,Paint Flashing Tool,リフローイベントのログ記録,ネットワークパフォーマンス |
上記の機能の中から、今回は代表的なもの4つを取り上げ、簡単にご紹介します。
ページインスペクタ
開発ツールで必要とされる機能といえば、まずDOMのインスペクタです。「インスペクタ」と書かれたタブをクリックすることで、表示できます。
DOMツリーの表示、適用されているCSSの表示、計算済みの値の一覧といった基本的なことはもちろんできます。ボックスの幅や高さ、マージンといったサイズに関する情報は「ボックスモデル」として確認できます。ボックスモデルは開発ツールの中で見ることもできます。また描画されたページにオーバレイする形でも表示されます（2014年5月の時点ではベータ版で利用可能）。
使用されているフォントや、色が実際に目で見て確認できるというのも、細かいことながら便利な機能です。色サンプルをクリックすることで、カラーピッカーが表示されます。カラーピッカーで選んだ色が、ページの描画結果へ動的に反映されます。
スタイルエディタ
ページの描画結果を確認しながら、要素やスタイルを編集できるのがFirefoxの大きな特徴です。その特徴がよく現れているツールがスタイルエディタです。CSS向けのエディタですが、編集内容が表示中のページの描画結果へ即座に反映されます。
コード補完も強力です。CSSのプロパティだけでなく、whiteやblackといった値も文脈に応じて補完します。またセレクタも補完します。タグ名はもちろんですが、表示しているページのid属性値やclass属性値などを使ってセレクタを補完できます。
編集結果はファイルへ出力できます。既にあるCSSファイルを、レンラリング結果を見ながら修正しファイルへ出力、といった流れでスタイルの修正が効率的に行えます。
Webコンソール
ページインスペクタと同程度よく使われる機能がWebコンソールだと思います。
ここには様々なログが出力されます。console.log経由で出力されるもの以外にも、CSSやJavaScriptのエラー、通信の状況などが出力されます。出力するログは画面上部、ツールバー中のボタンをトグルすることで、フィルターできます。
要素の追加、削除、:hoverのような疑似クラスのアクティブ化といったことで起きるページの再秒にかかった時間も出力されます。ツールバーのCSSボタンををクリックして、ログを選択することで再描画時間が表示されます。この再描画がJavaScriptによって発生した場合、発生源のコード行へのリンクも表示されます。
JavaScriptデバッガ
JavaScriptデバッガはその名の通り、JavaScriptをデバッグするツールです。デバッガタブをクリックして利用できます。一般のデバッガ同様、ブレークポイントの設定や、ステップ実行、各スコープ内の変数値の確認、ウオッチ式の設定などが可能です。
ブレークポイントは行に対して設定できるほか、DOMイベントに対しても設定できます。以下のようにリスナが割り当てられているイベントの一覧の中から、ブレークさせたいイベントにチェックを入れます。チェックが入ったイベントが発生すると、そのリスナの視点で実行がブレークされます。
ミニファイされたJavaScriptファイルをデバッグする際には、ファイルの整形機能が便利です。画面左下にある大括弧の書かれたペアをクリックすると、ミニファイされたファイルがが読みやすく整形されます。
まとめ
Firefoxで利用可能な開発ツールは、Firebugが有名です。こちらもMozillaの製品で、豊富なプラグインが特徴です。特定のライブラリに対する開発を行うなら、Firebugとそのプラグインを利用する方が効率的に行える場合もあります。
これに対し、今回ご紹介した開発ツールは、オーサリングツールという側面も持っている点が大きな特徴です。編集が描画内容にその場で反映されるだけでなく、コード補完機能やシンタックスハイライト、行番号の表示と言ったエディタとして必要とされる機能も備えているため、単なる修正だけでなく、スクラッチからの作成にも耐えるものとなっています。
Firefoxの開発ツールの概要を、駆け足で見てきました。今回ご紹介したもの以外にも様々な機能を持っています。詳細な情報、使い方については Mozilla Developers Network (MDN) 内の記事をご覧ください。今回の記事をきっかけに、Firefoxを開発ツールの選択肢に入れていただければ（そしてメインの開発ツールにしていただければ！）幸いです。