Firefox内蔵の開発ツール使いやすい！と思った11のポイント

最近、Firefox内蔵の開発ツールを使い始めました。

大分前にも、ちょっと使ったことがあったのですが、以前よりもかなり使いやすくなっていて、これからは、Firefoxの内蔵開発ツールを使おうと思っています。

僕はこれまで開発ツールは、Chrome内蔵のものと、FirefoxではFirebugを利用していました。で、どちらかというとFirebugを主に使用しており、機能は十分でした。けれど、いかんせん動作が重たいという不満がありました。

そんな不満があったときに、Firefox内蔵の開発者ツールを使ってみたところ、動作もサクサクで、機能も十分となれば、これはちょっと乗り換えをするには十分です。

以下では、FirebugやChromeデベロッパーツールとの違いを比較しながら、Firefox内蔵ツールのよかったポイントを紹介していきたいと思います。

photo by Oliver Propst

Firefox内蔵開発ツールのここがよい！

Firefox内蔵開発ツール（以下：Firefox内蔵ツール）は、FirebugやChromeのデベロッパーツールと比較してみると、両者機能の良いとこ取りをしてあるように思います。その上、他の開発ツールにはない独自機能まであります。

以下は、僕が使ってみて感じた主なFirefox内蔵ツールのナイスなところです。

1. 動作が軽い
2. 見やすい、デフォルトで日本語化されている
3. インスペクタツールが視覚的にわかりやすい
4. ブラウザのボトム以外にサイド表示も出来る
5. レスポンシブの動作確認がかなり楽に
6. :hover、:active、:forcusのスタイルを手軽に確認出来る
7. 色をカラーピッカーで取得できる
8. 上下カーソル操作でプロパティ値を変更できる
9. ページ上から色を選択できるカラーピッカー機能付き
10. スクラッチパッドでJavaScript（jQuery）の動作を手軽に試せる
11. 3D表示でレイヤーの重なりを確認できる

以下で、それぞれ詳しく説明したいと思います。

動作が軽い

Firefox内蔵ツールは、とにかく動作が速いです。

Firefoxは、とにかくタブを多く開いていたりすると動作がもっさりになってしまいます。その状態で、Firebugで要素調査をしようとしたりすると、調査結果が出るまで10秒あるいはそれ以上かかったりすることがありました。

それが、Firefox内蔵ツールではそんなことはほとんどありません。タブを多く開いていようが、要素の調査結果はすぐに表示されます。この動作性のよさは、Chromeのデベロッパーツールに匹敵すると思います。

見やすい（デフォルトで日本語表示）

Firefox内蔵ツールは、レイアウトもとても見やすく、デフォルトで日本語化されているので抵抗なく使うことができます。

Firefox内蔵開発者ツールのインターフェース

見た目はこんな感じです。

設定もほぼすべて日本語です。

一部、英語の部分もありますが、これはWEB開発をする人なら日常的に使用する単語なので、完全に日本語化されていると言っていいと思います。

Chromeデベロッパーツールのインターフェース

Chromeだと、デフォルトでは以下のように英語表記なので、慣れるまでは取っつきにくいです。

設定画面も英語なので、心理的に億劫な感じがします。

Firebugのインターフェース

Firebugも完全に日本語化されています。

ただ、設定画面はメニューから一つ一つ選択しなければなりません。

インスペクタツールが視覚的にわかりやすい

開発ツールを使っていたら、最も利用するのがインスペクタツールだと思います。

インスペクタツールというのは、WEBページの要素上で右クリックをして「要素を調査」とか「要素を検証」とかする機能のことです。

そのインスペクタツールですが、クリックして要素を選択する機能も開発ツールにはついています。

Chromeならこういうやつ。

Firebugならこういうやつです。

このアイコンをクリックして、HTMLの要素上でクリックすると、その要素の調査結果が表示されます。

Firefox内蔵ツールにも当然この機能があります。

これら3つを比較した結果、個人的には、Firefox内蔵ツールのインスペクタツールの表示が最もわかりやすいような気がします。

Firefox内蔵ツールの選択時

Firefox内蔵ツールの、インスペクタで選択する時の表示は、以下のように、marginがオレンジ、paddingが黄緑とわかりやすく、要素とそのサイズ（widthとheight）が吹き出して表示され、ガイド線まで表示されます。

Chromeデベロッパーツールの選択時

Chromeのデベロッパーツールも、margin、padding、width、heightが同様の見た目になっていますがガイド線が表示されません。見た目は、おそらくFirefox内蔵ツールの方がデベロッパーツールを踏襲したんだと思います。

Firebugの選択時

Firebugにいたっては、ただスクエアで囲まれるだけです。しかも、タブなどを大量に開いている場合は、この動作が滅茶苦茶遅くなるときがあります。

開発ツールをサイドに表示することもできる

Firefox内蔵ツールでは、開発ツールをサイド表示にすることもできます。これはおそらく、Firefox内蔵ツールにしかない機能だと思います。多分。

これは、ツールバーの「ブラウザのサイドに表示」アイコンをクリックすると、ブラウザの右側にくっついた形で開発ツールが表示されます。

この機能の、何が便利かというと、モバイルなどの動作確認をする時です。ユーザーエージェントを変更するUser Agent Switcherアドオンなどと併用すると狭いブラウザ幅での動作確認が容易になります。

大抵のスマホ用のデザインは、横幅が狭い縦型を想定して作成してあると思います。ですのでこの配置は、ページ確認がしやすいうえに、開発ツールの調査内容を大きく表示できるので、とても使い勝手が良いです。

レスポンシブデザインの開発がしやすい

これも他の開発ツールにはないと思うのですが、レスポンシブデザインモードがあるので、レスポンシブデザインの時には大変重宝します。

レスポンシブデザインモードを利用するには、ツールバーの「レスポンシブデザイン」アイコンをクリックします。

先程の「ブラウザのサイド表示」と組み合わせて使用すると、動作確認がかなり捗ります。

レスポンシブデザインモードには以下のような機能もあります。

• よく利用されるサイズのプリセットがあらかじめ用意されている
• 高さと幅の入れ替えをワンボタンでできる
• タッチイベントをシミュレートできる
• ワンクリックで表示領域のキャプチャー保存

サイズの変更、高さと幅の入れ替えもお手の物です。

モバイル表示では、User Agent Switcherアドオンとの組み合わせがお勧めです。

:hover、:active、:forcusの状態を手軽に確認できる

これはChromeにも機能はあるのですが、Firefox内蔵ツールの場合、要素選択から右クリックメニューに直接:hover、:active、:forcusスタイル適用メニューが表示されています。

:hoverのスタイルなどは、結構確認することがあるのでこれが結構ありがたいです。Chromeだと、右クリックからサブメニューを経由して選択しなければならないので、少しだけ作業負担が増えます。

色をカラーピッカーで簡単に取得できる

開発しているページのスタイル設定色をテスト的に変更したいとき、Firefox内蔵ツールは、カラーピッカーで色選択が行えます。

これはChromeでも行えますが、Firebugデフォルトではできないのでありがたいです。

上下カーソル操作でプロパティ値を変更できる

スタイルシートのプロパティ値など数字の場合は、上下カーソルを押すだけで数値を操作することができます。

下カーソルを押すとサイズを1pxずつ動作確認しながら減らすことができます。

これは、ChromeでもFirebugでも行えるのですが、やっぱりこの機能は便利です。

あと、色の濃淡を上下カーソルで変更できるのも便利。

これは、Firebugも同様の機能があります。Chromeのデベロッパーツールだと、16進数の数値が1つずつ上がるだけなので、イマイチ使い勝手が悪いです。

Firebugだと、その他スタイルシートのプロパティ値もカーソルキー上下で変更できるのですが、その機能までは残念ながらなかったです。

ページ上の色を選択するカラーピッカー機能が使いやすい

Firefox内蔵ツールのカラーピッカーは、以下のように拡大鏡のように表示されるのでとても使いやすいです。

例えば、1pxしかないボーダーの色を選択するのも、通常のカラーピッカーよりはかなり楽になります。

これのおかげで、開発時にColorZillaアドオンのようなカラーピッカーを使うことがなくなりました。

カラーピッカーの設定

ただ、このカラーピッカーはデフォルトではツールバーに表示されていません。

Firefox内蔵開発者ツールの設定から「ページから色を選択します」にチェックをつけてください。

以下のようにツールバー上にアイコンとして表示されます。

スクラッチパッドでJavaScriptのテストが手軽

Firefox内蔵ツールにはスクラッチパッドという機能があります。

スクラッチパッドは、JavaScriptやjQueryなどの試し書きテストを行うのに最適なテストエディターとなります。

例えば以下のようなページの背景色を赤色に変更するjQueryコードをテストしたいとします。

jQuery('body').css('background-color','red');

コードを記入して、「実行」ボタンを押すと背景色が変わることを、テスト確認することができます。

その他にも例えば、以下のようにスクラッチパッドのコードに不備があった場合は、パッド上にコメントとしてエラーが表示されます。

jjQuery('body').css('background-color','red');

/*
Exception: jjQuery is not defined
@Scratchpad/6:10:1
*/

また、スクラッチパッド上に以下のような解説が書いてあるので、ボタンの使い方に悩むこともないと思います。

/*
 * この画面は JavaScript スクラッチパッドです。
 *
 * JavaScript を入力して、右クリックまたは [実行] メニューを選択してください。
 * 1. 実行: 選択したコードを実行します。(Ctrl+R)
 * 2. 調査: 実行結果をオブジェクトインスペクタで表示します。(Ctrl+I)
 * 3. 表示: 選択したコードの後ろに、実行結果をコメント形式で挿入します。(Ctrl+L)
 */

• 実行：スクリプトを実行する
• 調査：実行結果だけをテキストで表示
• 表示：関数などの実行結果の返り値をコメントでパッド上に表示
• 整形出力：スクラッチパッド上のスクリプトを整形する

その他に、カッコやクオートの補完機能もあります。これらはかなり嬉しい機能です。

これらは、JavaScriptコードを書くときは、まずスクラッチパッドで試し書きをして、正常に動作したら本番環境にコピペするという使い方になりそうです。

スクラッチパッドの表示設定方法

スクラッチパッドもデフォルトでは、ツールバーに表示されていません。

ツールバー表示にするには、開発ツールの設定から「スクラッチパッド」にチェックを入れてください。

チェックを入れると、ツールバーに以下のようなアイコンが出るので簡単に呼び出せるようになります。

3D表示でレイヤー構造を把握できる

これはまだ、実際にそこまで有効活用したことはないのですが、「3Dビュー」機能でページのレイヤー構造を視覚的に見ることができます。

もちろん、レイヤーの一部を選択すれば、その部分の要素が開発ツールで選択されます。

自分のサイトの階層構造を把握するには、結構面白い機能だと思います。

3Dビュー機能の表示設定

3Dビュー機能もデフォルトではツールバーに表示されません。

ツールバー表示にするには、開発ツールの設定から「3Dビュー」にチェックを入れてください。

チェックを入れると、ツールバーに以下のようなアイコンが出るので簡単に呼び出せるようになります。

参考資料

Firefoxの開発ツールをより詳しく知るには、公式ページを参照することをお勧めします。

開発ツール | MDN

特に、より効率的に開発を進めるにあたって、以下のキーボードショートカットページはとても参考になります。

キーボードショートカット – 開発ツール | MDN

まとめ

以前から、「Firefox内蔵の開発ツールが良くなっている」というの目にすることはあったのですが、実際にここ最近使ってみてようやく実感しました。

僕はこれまで、Firefoxで動作確認するときは、もう何年もFirebugを利用してきました。そんな、ある程度使い慣れたということを込みにしても、トータルで考えると、使いやすさは「Firefox内蔵の開発ツール」に軍配が上がると僕は思います。

Firebugにあって、内蔵ツールにない機能もあるのですが、なによりも一番ありがたいのは軽いことです。WEBページでもアプリでも言えることなんですが、やはり利便性において「軽いは正義」だと思います。