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

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

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

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

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

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

photo by Oliver Propst

スポンサーリンク
レクタングル(大)広告

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

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

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

  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内蔵開発者ツールのインターフェース

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

Firefox内蔵開発ツールの見た目

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

Firefox内蔵開発者ツールは設定も日本語

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

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

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

Chromeデベロッパーツールの見た目

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

Chromeデベロッパーツールの設定の見た目

Firebugのインターフェース

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

Firebugの見た目

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

Firebugのインタフェース

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

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

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

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

Chromeならこういうやつ。

Chromeのインスペクタツール

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

Firebugのインスペクタツール

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

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

Firefox内臓を開発ツールのインスペクタツール

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

Firefox内蔵ツールの選択時

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

Firefox内蔵ツールのインスペクタ選択時の表示

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

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

ChromeデベロッパーツールのInspector洗濯表示

Firebugの選択時

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

Firebugのインスペクタ選択表示

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

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

Firefox内蔵ツールのブラウザのサイドに表示機能

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

ブラウザのサイドに表示アイコン

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

ブラウザのサイドに表示機能はレスポンシブやスマホ表示を見るときに重宝する

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

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

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

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

レスポンシブデザインモードアイコン

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

レスポンシブスタイルモード+ブラウザのサイド表示

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

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

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

レスポンシブスタイルモードで高さや幅の変更

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

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

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

右クリックにhoverなどがある

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

Chromeでhoverスタイルを適用するとき

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

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

Firefox内蔵ツールのカラーピッカーで色選択

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

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

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

上下カーソルキーで値を操作

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

プロパティ値の変更後

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

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

色の濃淡を上下カーソルで変更

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

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

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

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

拡大鏡つきカラーピッカー

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

1pxしかないボーダーの色を選択する

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

カラーピッカーの設定

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

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

カラーピッカーの設定

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

カラーピッカーのツールバー表示

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

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

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

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

スクラッチパッドにjQueryコードを実行

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

寝ログ  寝ながら出来るコトや使えるモノを紹介

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

スクラッチパッドのコードに不備があった場合

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

スクラッチパッドのボタン

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

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

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

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

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

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

スクラッチパッドの設定

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

スクラッチパッドのアイコン表示

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

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

Firefox内部開発ツールの3Dレイヤー表示

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

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

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

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

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

3Dビュー機能の設定

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

3Dビュー機能のアイコン表示

参考資料

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

開発ツール  MDN

開発ツール | MDN

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

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

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

まとめ

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

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

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