先日から、メインブラウザにFirefox Developer Editionを利用しています。
このブラウザは、公式が出している64bitブラウザということもあるのか、動作がかなり軽快です。
それもよかったのですが、やはりFirefox公式が出している、開発者向けブラウザということもあり、開発向けな機能がデフォルトでいろいろと揃っています。
ただ、僕はFirefoxで開発者ツールを使うときは、FirebugとFirefox内蔵ツールを併せて利用しています。
で、Firefox Developer Editionの方には、Firebugが入っていなかったのでインストールしました。すると、Firebug 3.0が自動的にインストールされ、なんとFirebugとFirefox内蔵ツールの機能が融合されてしまったじゃないですか。
これは、予想外の出来事だったので、以下でFirebug3.0について紹介したいと思います。
photo by John Flannery
目次
Firebug3.0
Firebugとは、Firefox向けのデベロッパーツールです。
あらゆるWEBページのCSS、HTML、JavaScriptリアルタイムに編集、デバッグすることができるツールです。僕はFirefoxで要素などを検証するときは、使い慣れているということもあって、Firebugを利用しています。
ただ、3.0からはFirebugはFirefoxネイティブの開発ツール上に構築されるようです。
それで、Firebugと内蔵開発ツールがフュージョン（融合）したような感じを受けたようです。
Firebug 2.0→3.0で便利になった機能
Firebug 3.0とFirefox内蔵ツールの機能が統合されたことにより、Firebug 2.0と比べて以下のようなものが便利になったと感じました。
D&Dで要素を検証する時にガイド情報が表示されるように
以前のFirebugでは、
などを利用して、要素上にマウスカーソルを乗せると以下のように選択領域が表示されていました。
これが、Firefox3.0では以下のように表示されます。
これは、Firefox内蔵開発者ツールの表示と同じなので、その機能が使われているのではないかと思います。おかげでカーソルを乗せただけで、高さと幅、マージン、パディングなどがわかりやすくなりました。
カラーピッカー機能がついた
これも、内蔵ツールからだと思うのですが、CSSの色選択時などにカラーピッカーを利用できるようになりました。
これで、テストで色を入れたいときなどに、「緑っぽい色を入れるときは、RGBだから…」みたいにカラーコードを考えなくても適当にカラーピッカーから取得することができるようになりました。
:hover疑似クラスなどがデフォルトで表示されるように
ドラッグ＆ドロップなどで、要素選択をした時に、:hover疑似クラスがあるときは、それもデフォルトで表示されるようになりました。
これは地味に便利です。
レスポンシブデザインモードが使えるように
以前は、Firefox内蔵ツールから利用するしかなかった「レスポンシブデザインモード」がFirebugからでも利用できるようになりました。
以下のように、手軽に画面幅を変更できるモードになります。
動作が速くなった
以前のFirebug2.0よりは、動作が速くなりました。
まとめ
というか、これは完全に中身がFirefox内蔵開発ツールになっているといった感じです。
単に、利用テーマにFirebugの名残が残っているだけのような。
実際に以下の部分の設定を
以下のようにすると、完全にFirefox内蔵開発者ツールになってしまいます。
なので、Firebugの細かな動作が気に入って利用している場合は、Firebug3.0にアップデートしない方が良いのかもしれません。
