Firebug 2.0
・原文: Firebug 2.0 (posted by Jan ‘Honza’ Odvarko , 2012/6/10)
Firebug 2.0
最新の Firebug 2 が公開されました。このバージョンで、どのような新機能が導入されたのか見ていきましょう。
- Firebug 2.0 は Firefox 30 – 32 に対応しています。
Firebug 2.0 beta 8 も、AMO のベータチャンネルを利用しているユーザーのためのアップデートとして公開されました。このバージョンは 2.0 と全く同じ内容のものです。
Firebug は世界中の開発者がメンテナンスしているオープンソースプロジェクトです。以下は、Firebug 2 の開発に貢献した全メンバーの一覧です。
|
|
また、数多くの翻訳者が Firebug を 35 の言語にローカライズしてくれました！
詳しい記述まで読み進めていく前に、最新の UI がどのようなものなのか見てみましょう。Firebug はバージョン 2 で見た目が一新されています。ワールドクラスのデザイナーが新しいテーマの作成に取り組んできました。そして、すっきりとした直感的なユーザーインターフェイスとなりました。
Firebug 2 の UI:
スクリーンショットは Windows 版のテーマです。ほかの OS（Linux や Mac）にもそれぞれに合わせて作られたテーマがあります。
新機能
Firebug 2 は古い Firefox のデバッグエンジン (JSD1) への依存を完全に取り去り、新しいデバッグエンジンである JSD2 を組み入れることで、多くの新機能とバグ修正が行われています。
シンタックスハイライティング
最も目立つ新機能の一つとして挙げられるのは、 Script パネルが JavaScript のシンタックスハイライトに対応したことでしょう。
ツールバーの Edit ボタンをクリックして自由なテキストとしてHTMLを編集する際にも、シンタックスによる色分けが行われます。
Pretty Print
Script パネルは Pretty Print にも対応しています。圧縮された JavaScript のコードを扱うとき、この機能が極めて役に立つことに気づくはずです。
DOM イベントインスペクタ
Firebug 2 は既存の EventBug エクステンションと統合し、新しい Events サイドパネルを既存の HTML パネルの中に導入しました。このパネルはページ中の全イベントハンドラを、現在選択されている DOM 要素に関するイベントタイプごとに分けて一覧表示します。Events パネルはほかの Firebug のパネルとよく調和し、特定のイベントリスナーとどの HTML 要素が紐付いているかを見つけ出し、JavaScript ソースコードを表示することを可能にします。（さらに詳しく）
HTML パネルでの検索
HTML パネル内の検索が改善されました。ユーザーは CSS セレクタ や 正規表現 を利用して特定の要素を見つけることができます。
コードの自動補完
コードの自動補完システムはFirebug 2 の UI のいくつかの箇所に渡って改善されています。Command Editor（Console パネルの中にあります）で利用可能です。tab キーを押すと補完のための小さなポップアップウィンドウが開きます。
自動補完は、ブレークポイントの状態を示すポップアップダイアログの中でさえも有効です。ダイアログには、現在のスコープの中の変数が表示されます。
HTML 属性（および SVG 属性）、HTML の style 属性の中を編集する際にも、自動補完の恩恵に預かることができます。これら全ての細部への留意によって、Firebug はとてもよく使うことができるツールになっています!
JavaScript の式インスペクタ
コードをデバッグしたりステップ実行する際に、Script パネルに表示されている JavaScript の式の詳細を調べたり、探したりすることができます。マウスカーソルを式や選択部分の上に置くだけで、ツールチップに結果が表示されます。
また、式や現在の選択部分を右クリックして、Use in Command Line や Inspect in DOM Panel のアクションを選択することもできます。
コンソールログのグループ化
Console パネルには、同じ場所で連続して出力されるコンソールログをグループ化することができる新しいオプションがあります（デフォルトで有効です）。
JavaScript 関数の返り値を調べる
この機能を使って、JavaScript 関数の返り値を調査したり、修正したりすることができます。例を見てください。
function myFunction() {
return foo();
}
ほかのデバッガやツールのよくある問題として、foo() の返り値をどうやって調べるか、というものがあります。Firebug は return 文をステップ実行して値を Watch サイドパネルに表示することで、それを可能にしています。Watch パネルによって、ほかの値と全く同じように、返り値を修正することすら可能です（さらに詳しく）。
Firebug パネルの表示/非表示
Firebug 2 に導入された変更のひとつに、パネルごとの表示/非表示の方法があります。次のスクリーンショットを確かめてください。この機能がどのようになっているのかを表しています。
オリジナルの CSS カラーの値の表示
また別の魅力的な改良として、オリジナルの CSS カラーの値を表示する機能があります。CSS パネルには Colors As Authored という新しいオプションがあり、定義されたとおりの CSS カラーの値を表示することができます。これにより、ブラウザによって解釈されたスタイルとオリジナルの CSS ソースファイルの中のスタイルを比較するのが容易になります。この新しいオプションが今回デフォルトになる一方で、十六進、RGB または HSL 形式に切り替えるという選択肢も依然としてあります。
新しい HTML 属性を素早く作成する
HTML 要素に属性を素早く新規追加できる新しい方法があります。新たに属性を追加したい要素の末尾の矢印かっこの上にマウスカーソルを置くだけです。カーソルが手の形に変わるのがわかるでしょう。
閉じタグをクリックすると、インラインのエディタが開きます。属性名をタイプしてみてください。
あとは普段のとおりです。属性名をタイプしたら、タブキーを押して属性の値をタイプしてください。
登録されている Mutation Observer を調べる
既存の getEventListeners() コマンド（Firebug のチップス をご覧ください）が拡張され、特定の要素に登録された Mutation Observer も表示できるようになりました。
この機能を試すことができるテストページをご利用ください。
2.0 の リリースノート もご覧ください。
Firebug エクステンション
いつものように、私たちは既存の Firebug エクステンションをテストするのにいくらかの時間を費やしました。こちらは、私たちのレビューを経ている、Firebug 2.0 で動作するエクステンションの一覧です。
- AMF Explorer AMF Explorer は Firebug の JSON Explorer と XML Explorer の特徴に基づいています。AMF Explorer を使うと、Web 開発者はデシリアライズされた AMF メッセージを Firebug の Net パネルで見ることができます。
- Console Export Console パネルからデータをエクスポートします。
- CSS Usage アプリケーションの中でどの CSS ルールと CSS プロパティが実際に使われているかを調べます。
- Firediff ページの構成要素にどのような変更が為されているかをさらに観察します。
- FireLogger Web 開発のためのログ出力を支援します (PHP, Python, ColdFusion) （こちらの投稿もご覧ください）
- FirePath XPath 1.0 の式や CSS3 のセレクタを編集、検査、生成するための開発ツールを追加します
- FirePicker Firebug のインライン CSS エディタにカラーピッカーを追加します（こちらの投稿もご覧ください）
- FireQuery Firebug に jQuery に関する拡張機能のコレクションを追加します。全ての jQuery 開発者にお勧めします。（こちらの投稿もご覧ください）
- FireStorage Plus! localStorage や sessionStorage などのWeb Storage のコンテナを表示し、操作するための Firebug の追加パネルです。（こちらの投稿もご覧ください）
- FlashFirebug Web上のどんな AS3 SWF ファイルもデバッグします。プロパティを編集し、要素を検査します。SWF の出力をエクステンションにリダイレクトします。動的に AS3 のコードを実行し、オブジェクトを変化させます。SWF のアセットにデコンパイラを使ってアクセスします。AMF の呼び出しや共有オブジェクトを見ることができます。ほかにもたくさんの機能があります!
- Illuminations for Developers JavaScript フレームワークを取り出し、ビュー、モデル、クラス名なども含めて、その内部を Firebug で見ることができるようにします。
- Javascript Deminifier JavaScript をダウンロード前に可読化します。
- NetExport Net パネルからのデータのエクスポートを可能にする Firebug エクステンションです。
- Omnibug Web メトリクスの実装を容易に開発するための Firebug プラグインです。（ブラウザから）送られたそれぞれのリクエストはパターンによってチェックされます。もしマッチした場合、URL は Firebug のパネルに表示され、リクエストの詳細を表示するためにデコードされます。加えて、リクエストをファイルシステムにログ出力することができます。
- PageSpeed オープンソースの Firefox および Firebug のアドオンです。ウェブマスターや開発者は PageSpeedを使って、 Web ページのパフォーマンスを評価し、その改善提案を受け取ることができます。
- YSlow YSlow はハイパフォーマンスな Web ページのためのルールセットに基づいて、Web ページを解析し、パフォーマンスを改善させるための提案をします。YSlow は Firebug の Web 開発ツールと統合した Firefox アドオン として利用できます。
- ZikulaBug Zikula の DebugToolbar のための使いやすいインターフェイスを提供する Firebug エクステンションです。Zikula のデバッグデータを、概略、構成、SQL、テンプレート、関数の実行、ログコンソール、HTTP リクエスト、設定の 8 つのタブにグループ化して表示します。
- Dojo Firebug Extension Dojoをベースとしたアプリケーションのデバッグを支援します。
- Firefinder 任意の CSS セレクタまたは XPath の式に合った HTML 要素を素早く見つけます。
- Fireflow メソッド呼び出しのログをツリー形式で提供します。
全エクステンションの一覧 もご覧頂けます。
Twitter で私たちをフォローして最新情報を受け取りましょう!
また、ニュースグループでフィードバックを投稿することができます。
Jan ‘Honza’ Odvarko