FirebugとDevToolsの統合

原文: Firebug & DevTools Integration on Oct 28, 2015 by Jan Honza Odvarko

私たちが Firefox Developer tools (DevTools)と Firebug の統合に力を注いでいることはご存知でしょうか。すべての Firebug の機能をネイティブの DevTools に移植する作業に取り組んでいます。それによって、マルチプロセスにおける互換性の向上や、リモートデバッグが可能になります(例: Electrolysis 互換)。できる限りスムーズに Firebug から DevTools への移行パスについても準備中です。このように、私たちは現在唯一の素晴らしいツールを開発することにフォーカスしています。どのようなものか見ていきましょう。次世代のFireBugの主な目標は、ネイティブの DevTools を使っているときと同じ使い勝手を実現することです。これは(FireBug.next として知られている)FireBug 3 によってもたらされます。FireBug 3 は異なる別のツールではありません。DevTools 上に薄いレイヤーとして構築されており、DevTools が Firebug のように見える新しいテーマを提供します。また、いくつかの新しい機能追加があり、少しずつ DevTools に移植される予定です。
足りない機能については(例: 旧バージョンの FireBug にあった機能など)、将来的に DevTools の機能としてサポートされます。

Firebug 3

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

Firebug 3 (aka Firebug.next)

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

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

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

Firebug Start Button

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

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

DOM panel

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

XHR Previews

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

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

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

FireQuery extension

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

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

FireQuery extension

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

FireQuery Inspector panel

FireQuery Inspector panel

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

PixelPerfect extension

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

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

PixelPerfect Start Button

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

PixelPerfect UI

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>
  • AMO から拡張機能をダウンロードする。

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

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

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

Server side logging

本機能は(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>

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

Server log

最後に

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

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

Jan ‘Honza’ Odvarko

Jan Honza Odvarko について

Firebugチームリーダー

Jan Honza Odvarkoによるその他の記事…