Firebug 3

次のスクリーンショットを見てください。Firebug 3 (first beta) をインストールすると DevTools の見た目がどうなるかを示しています。よく似ていると思いませんか？

（Firebug.next として知られる）Firebug 3 はまだ AMO からは配布されていません。そのため（about:configから）xpinstall.signatures.required の設定を false に変更する必要があります。

DevTools に移植された Firebug テーマは UI とレイアウトに関していくつかのメリットをもたらします。また、みなさんご存知の Firefox のツールバーにある Firebug のスタートボタンは developer toolbox のエントリーポイントを表します。

次の画面では Firebug Theme が有効になっています。

開発ツールの画面に切り替える方法は全く同じです。スタートボタンを押すか、F12 キーを押します。

DOM を調べるために DOM パネルをよく利用しているかもしれません。Firebug にその機能はありますが、（まだ）サポートされていません。

(多くの要望があった)コンソールパネル内の XHR プレビューもすでにサポートされています。

いくつかの人気のある拡張機能については DevTools の上に再実装されました。このことは人気の機能を使い続けられるということだけではなく、新しい拡張機能を直接 DevTools に対して作成する方法について、素晴らしいサンプルでもあります。これらの拡張機能を実行するのに Firebug は必須ではありません。

拡張機能の開発者のみなさんにとっては、こちらのサンプルコードやリソースへのリンクが DevTools を拡張する方法について役に立つでしょう。

それでは、どんな拡張機能があるのが見ていきましょう。

FireQuery extension

FireQuery は jQuery 開発のための Firefox プラグインです。DevTools 上に開発されました。Firebug 3 は必須ではありませんが、下記のスクリーンショットのいくつかは、DevTools の Firebug テーマが有効になっていることを示しています（その他のライトとダークテーマもサポートされています）。

jQuery data に関連づいた要素はコンソールパネルに小さな封筒のアイコンとともに表示されます。アイコンをクリックして要素を調べることができます。さらにコンソールパネルのツールバーには jQuerify ボタンがあり、現在のページに jQuery を読み込むことができます。

インスペクタパネルでも jQuery data に関連づく要素は封筒のアイコンが表示されます。アイコンをクリックするとポップアップで詳細が表示されます。

• 詳細は FireQuery home page をご覧ください。
• AMO から拡張機能をダウンロードしてください。
• test pageでこの拡張機能を試してください。

PixelPerfect extension

Pixel Perfect はWebデベロッパとデザイナが簡単に Web の構成要素に半透明のレイヤー（画像）をかぶせて確認することができる Firefox 拡張機能です。ピクセル単位で Web ページとレイヤーを比較して確認することができます。

この機能拡張は、ショートカットとして Pixel Perfect ボタンを追加します。

下記の画面はボタンをクリックした時に表示されるPixel Perfect機能拡張のUIです。

• 詳しくは Pixel Perfect home page をご覧ください。
• AMO から拡張機能をダウンロードしてください。

HAR export

ネットワークパネルから HAR (the HTTP Archive format)にエクスポートする機能は、標準機能に組み込まれました。これからは追加の拡張機能は必要なくなります。ネットワークパネルを選択（もし必要ならWebページをリロード）して、次の2つのコンテキストメニューを使います。

• Copy All As HAR: データをクリップボードにコピーします。
• Save All As HAR: データをファイルに保存します。

ネットワークパネルからのデータエクスポートは自動化されることがよくあります（例: Selenium を使ったテスト時など）。Web ページを読み込むたびに自動的に HAR ファイルを作成したい場合は、（about:configから）下記の設定を true に変更します。

devtools.netmonitor.har.enableAutoExportToFile

ページをロードするたびに HAR ファイルを作成することについて、自動化システムの中にはもっと柔軟に行えるものもあります。リモートサーバからデータを送信し、ユーザーのアクションに応じて、HAR をエクスポートするなどです。これが私たちが HARExportTrigger 拡張機能を導入した理由です。これは HAR API を使ってページのコンテンツをエクスポートする操作の自動化を改善します。簡単なスクリプトで HAR エクスポートをいつでも実行することができます。

下記はネットワークパネルから HAR データを取得するサンプルスクリプトです。

<code>var options = {
  token: "test",
  getData: true,
};

HAR.triggerExport(options).then(result =&gt; {
  console.log(result.data);
});
</code>

• 詳細は HAR Export Trigger の Web サイトをご覧ください。

• AMO から拡張機能をダウンロードする。

サーバサイドで console.* APIを使用するには

Firebug コミュニティによってサーバサイドで console.* API を使うことを可能にする多くのエクステンションが開発されました。そのため、バックエンドのログをブラウザーですぐに見ることができます。この機能は Firefox でネイティブサポートされたので、追加のエクステンションをインストールする必要はなくなりました。

コンソールパネルでサーバからのログを有効にするだけです。

本機能は（Chrome Logger で使われているような）HTTP ヘッダを通じてログを送るという既存のプロトコルをサポートしています。JavaScript のログ出力のように、継続的にコンソールパネルに表示されます。すでに様々な言語（NodeJS, Ruby, Python, PHP, .NET, Java など）で適切なサーバサイドの API を提供する多くのライブラリが存在します。

下記はサーバサイドのログ出力のサンプルコードです:

<code>var chromelogger = require('chromelogger');
var http = require('http');
var server = http.createServer();

server.on('request', chromelogger.middleware);
server.on('request', function(req, res) {
  res.chrome.log('Hello from Node.js %s', process.version);
  res.end();
});</code>

<code></code>

そして、下記の画面はコンソールパネルにサーバサイドのログがどのように表示されるかを示しています。

最後に

冒頭でご説明したように、私たちはネイティブの Firefox Developer tools (DevTools) と Firebug を統合しようとしています。それが Web デベロッパーのみなさんに素晴らしい開発ツールを提供するための効果的な戦略だと確信しているためです。まだまだ言い足りないことがありますが、この記事ではプランの概要と目標を示すにとどめたいと思います。続報をご期待ください！

記事のフィードバックは Firebug group にお寄せください。

Jan ‘Honza’ Odvarko