Firebug3.0をインストールすると「Firefox内蔵開発者ツール」と「Firebug」の機能がフュージョンする

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

先日から、メインブラウザにFirefox Developer Editionを利用しています。

Firefox系ブラウザは重い、けれどその中ではDeveloper Editionが最も軽い気がする
先日からメインブラウザにFirefox Developer Editionを利用しています。 これが、通常のFirefoxや、その他の...

このブラウザは、公式が出している64bitブラウザということもあるのか、動作がかなり軽快です。

それもよかったのですが、やはりFirefox公式が出している、開発者向けブラウザということもあり、開発向けな機能がデフォルトでいろいろと揃っています。

ただ、僕はFirefoxで開発者ツールを使うときは、FirebugとFirefox内蔵ツールを併せて利用しています。

で、Firefox Developer Editionの方には、Firebugが入っていなかったのでインストールしました。すると、Firebug 3.0が自動的にインストールされ、なんとFirebugとFirefox内蔵ツールの機能が融合されてしまったじゃないですか。

これは、予想外の出来事だったので、以下でFirebug3.0について紹介したいと思います。

photo by John Flannery

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

Firebug3.0

Firebug

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では、ドラッグ&ドロップで要素を検証などを利用して、要素上にマウスカーソルを乗せると以下のように選択領域が表示されていました。

Firebug2.0の選択領域

これが、Firefox3.0では以下のように表示されます。

Firebug3.0での選択領域

これは、Firefox内蔵開発者ツールの表示と同じなので、その機能が使われているのではないかと思います。おかげでカーソルを乗せただけで、高さと幅、マージン、パディングなどがわかりやすくなりました。

カラーピッカー機能がついた

これも、内蔵ツールからだと思うのですが、CSSの色選択時などにカラーピッカーを利用できるようになりました。

2015-04-26_16h21_28

これで、テストで色を入れたいときなどに、「緑っぽい色を入れるときは、RGBだから…」みたいにカラーコードを考えなくても適当にカラーピッカーから取得することができるようになりました。

:hover疑似クラスなどがデフォルトで表示されるように

ドラッグ&ドロップなどで、要素選択をした時に、:hover疑似クラスがあるときは、それもデフォルトで表示されるようになりました。

マウスホバーで要素選択

これは地味に便利です。

レスポンシブデザインモードが使えるように

以前は、Firefox内蔵ツールから利用するしかなかった「レスポンシブデザインモード」がFirebugからでも利用できるようになりました。

レスポンシブデザインモードがFirebugから使える

以下のように、手軽に画面幅を変更できるモードになります。

レスポンシブデザインビュー適用時

動作が速くなった

以前のFirebug2.0よりは、動作が速くなりました。

まとめ

というか、これは完全に中身がFirefox内蔵開発ツールになっているといった感じです。

Firefox内蔵の開発ツール使いやすい!と思った11のポイント
最近、Firefox内蔵の開発ツールを使い始めました。 大分前にも、ちょっと使ったことがあったのですが、以前よりもかなり使いやすくなっ...

単に、利用テーマにFirebugの名残が残っているだけのような。

実際に以下の部分の設定を

Firebugテーマ

以下のようにすると、完全にFirefox内蔵開発者ツールになってしまいます。

内蔵開発者ツールテーマ

なので、Firebugの細かな動作が気に入って利用している場合は、早番3.0にアップデートしない方が良いのかもしれません。