Firebug から移行する

この記事は一部分のみ作成されている書きかけの記事です。作成にご協力ください。
(新たな内容を書き加える場合、できれば英語版の記事の方にも反映してくださるようお願いします)

Firebug から Firefox 開発ツールへ移行する際に、Firebug で愛用していた機能が開発ツールのどこにあるかと考えるかもしれません。以下のリストは、Firebug のユーザーが開発ツールへ移行するための支援を目指しています。

一般

アクティブ化

Firebug のアクティブ化 は、URL に基づいて 同一生成元ポリシー に従います。すなわち、生成元が同じページを別のタブで開くと、Firebug が自動的に開きます。また、生成元が異なるページを同じタブで開くと、Firebug は自動的に閉じます。一方、開発ツールのアクティブ化はタブに基づきます。すなわち、あるタブで開発ツールを開くと、ウェブサイトを切り替えてもツールは開いたままです。しかし、別のタブに切り替えるとツールが閉じます。

ツールを開く

F12 を押下して Firebug を開くことができます。また、要素を調査するために Firebug を開くには Ctrl+Shift+C / Cmd+Opt+C を押下します。開発ツールのキーボードショートカットも同じですが、別のパネルを開くキーボードショートカット もあります。例えば ネットワークモニターCtrl+Shift+Q / Cmd+Opt+QウェブコンソールCtrl+Shift+K / Cmd+Opt+K、デバッガーを Ctrl+Shift+S / Cmd+Opt+S で開くことができます。

ウェブコンソール

ウェブコンソール は Firebug の コンソールパネル と同等です。これは、ウェブページに関する情報を記録します。また、コマンドライン を使用して JavaScript の式を実行することができます。両者の表示は若干異なっています。これは バグ 1269730 で変更する予定です。

ログメッセージのフィルタリング

Firebug にはログメッセージのフィルタリング方法が 2 つあり、ひとつは オプションメニュー、もう一つはツールバーの フィルターボタン です。開発ツールのコンソールは、ツールバー内のフィルターボタン で同様の機能を提供しており、ひとつの方法にまとめられています。

コマンドライン API

Firebug のコマンドライン API は、利便性のための特別な機能を提供します。開発ツールのコマンドラインに ある程度共通の機能 がありますが、異なる機能や欠けている機能があります。

コンソール API

ウェブページ内からコンソールに何かを記録するために Firebug は、ウェブページで使用できる Console API を作成しました。開発ツールも 同じ API を共有しており、console.* 文が引き続き動作します。

ログを残す

Firebug ではツールバーの 持続 ボタン を押すと、ページを移動したり再読み込みしたりしてもメッセージを残すことができます。開発ツールではこの設定が ログ出力を残す という名称であり、ツールボックスのオプションパネル内にあります。

サーバーのログ

FirePHP のような Firebug 拡張で、サーバーサイドのメッセージを Firebug のコンソールに記録できます。この機能は ChromeLogger プロトコルを使用してすでに 開発ツールに統合されており、拡張機能のインストールは不要です。

コマンド履歴

Firebug のコマンドラインにあるボタンで使用できる コマンド履歴 は、開発ツールのコマンドラインで / を押下する ことで使用できます。

オブジェクトの特性を調査する

コンソールに記録されたオブジェクトをクリックすると、DOM パネル でオブジェクトのプロパティやメソッドを調査できます。Firefox 開発ツールでも、オブジェクトを調査できます。Firebug との違いは、ウェブコンソール内のサイドパネルにプロパティやメソッドを表示する ことです。

JSON や XML 構造を表示する

JSON や AJAX リクエストの XML レスポンスを表示するために、Firebug にはコンソールパネル内でリクエストを展開する特別なタブがあります。開発ツールのウェブコンソールはこのような構造を、"応答" タブに直接表示します。

インスペクター

Firebug には HTML パネル があり、HTML/XML/SVG や、それらに関係する CSS を編集できます。開発ツールでは、インスペクター でこの機能を提供します。

HTML を編集する

インスペクターでは Firebug と同様に、タグの属性やコンテンツをインラインで編集できます。さらに、タグ名もインラインで編集できます。

HTML を直接編集することもできます。Firebug ではノードを右クリックして、コンテキストメニューの [HTML を編集] を選択します。開発ツールのコンテキストメニューにも、このメニュー項目があります。開発ツールでは [HTML として編集] という名称です。

Firebug の HTML パネルでは要素のコンテキストメニューで、要素の innerHTML や outerHTML、CSS、XPath をコピーできます。インスペクターは XPath のコピーを除く、同じ機能を提供します。XPath のコピーは バグ 987877 で扱っています。

CSS を編集する

どちらのツールも、ノードビューで選択した要素に関係する CSS ルールを、同様の方法で閲覧および編集できます。Firebug には スタイル サイドパネル、開発ツールには ルール サイドパネル があります。

Firebug では、右クリックしてコンテキストメニューの [ルールを追加] を選択すると、新しいルールを追加します。開発ツールでも新しいルールを作成するために、コンテキストメニューの [新しいルールを追加] という項目と、ルールパネルのツールバーの [+] ボタン があります。

要素のスタイルを編集する、すなわち要素の style 属性の CSS プロパティを編集するために、Firebug ではスタイルパネルを右クリックして、コンテキストメニューの [要素のスタイルを編集] を選択しなければなりません。開発ツールでは、この目的で 要素 {} ルール があり、ここを 1 回クリックするだけでプロパティを編集できます。

CSS のコピーと貼り付け

Firebug の スタイル サイドパネルも開発ツールの ルール サイドパネルもコンテキストメニューに、CSS ルールやスタイル宣言をコピーするためのメニュー項目があります。さらに開発ツールには、ルールのセレクターをコピーするメニュー項目や、コメントアウトにより無効なプロパティ宣言をコピーする機能があります。スタイル宣言全体をコピーする項目が欠けていますが、パネル内でそれらを選択して Ctrl+C またはコンテキストメニューを使用してコピーすることにより実現できます。

開発ツールの ルール サイドパネルは、CSS を貼り付けるときの動作がよりスマートです。コメントアウトされたプロパティ宣言を自動的に無効化して、スタイル宣言全体を既存のルールに貼り付けできます。

疑似クラスを切り替える

Firebug の スタイル サイドパネルのオプションメニュー で、要素の :hover:active:focus 疑似クラスを切り替えることができます。開発ツールでは、同じことを行う方法が 2 つあります。ひとつは ルール サイドパネル内の疑似クラスパネル で切り替える方法です。もうひとつはノードビューで要素を右クリックして、コンテキストメニュー で疑似クラスを切り替える方法です。

CSS ショートハンドプロパティを調査する

スタイル サイドパネルで [簡略プロパティを展開] を設定すると、CSS ショートハンドプロパティ を、関係があるロングハンドプロパティに展開できます。開発ツールのルールパネルはよりスマートであり、プロパティのそばにある三角印をクリックすると、個々のショートハンドプロパティを展開できます。

ボックスモデルを調査する

Firebug では、レイアウト サイドパネルボックスモデル を調査できます。開発ツールでは、ボックスモデルが 計算済み サイドパネルの一部になっています。どちらのツールもボックスモデルビューにマウスポインタを載せると、ページ上でボックスモデルのさまざまな部分を強調表示します。また、どちらのツールもボックスモデルをクリックすると、さまざまな値をインラインで編集できます。要素の幅と高さのみ、まだ調節できません (バグ 1061823 をご覧ください)。また、displaybox-sizing の値はまだ表示していません (バグ 1292051 をご覧ください)。

計算済みスタイルを調査する

Firebug の 累積 サイドパネル と同様に、開発ツールの 計算済み サイドパネル で CSS プロパティの計算済みの値を表示します。両者の違いは、開発ツールはプロパティを常にアルファベット順に並べておりグループ化しないこと (バグ 977128 をご覧ください) と、Mozilla 特有のスタイルを隠すオプションがないことです。このため、開発ツールにはプロパティをフィルタリングするための入力フィールドがあります。

イベントを調査する

Firebug では、要素に割り当てられたイベントを イベント サイドパネル に表示します。開発ツールでは、ノードビューで要素のそばにある小さな 'ev' アイコンをクリックすると、イベントを表示します。どちらのツールも、ラップされたイベントリスナー (例えば、 jQuery の関数でラップしたリスナー) を表示できます。開発ツールの UI を改善するため、Firebug のようなイベントサイドパネルを追加する要望が出ています (バグ 1226640 をご覧ください)。

DOM が変化したときにスクリプトの実行を止める

Firebug は DOM が変化したとき、すなわち要素が変更されたときにブレークして、JavaScript ファイルの関連する行でスクリプトの実行を止めます。これは、DOM の変化を起こした場所です。この機能は 変化したらブレーク ボタン でグローバルに有効化するか、要素ごと および属性変化・内容の変化・要素削除といった種類ごとに有効化できます。残念ながら、開発ツールにはまだこの機能がありません (バグ 1004678 をご覧ください)。スクリプトの実行を止めるには、変化させている行に デバッガー パネル でブレークポイントを設定しなければなりません。

CSS セレクターや XPath で要素を検索する

Firebug は、HTML パネルで CSS セレクターや XPath で要素を検索できます。開発ツールの インスペクター パネルも、CSS セレクターで検索できます。また、マッチする ID やクラスのリストを表示します。しかし、XPath による検索は未サポートです (バグ 963933 をご覧ください)。

デバッガー

Firebug の スクリプト パネル に相当するものが、開発ツールの デバッガー パネル です。どちらも、ウェブサイトで実行する JavaScript コードをデバッグできます。

ソースを切り替える

Firebug には、ウェブサイトに関係するすべての JavaScript ソースを表示する スクリプトロケーションメニュー があります。これらのソースは静的なもの (すなわち、ファイル) や、動的に生成されるもの (すなわち、イベントハンドラで実行するスクリプト、eval()new Function() など) があり得ます。開発ツールの デバッガー パネルでは、スクリプトを左側の ソース サイドパネル に一覧表示します。動的に生成されるスクリプトは、//# sourceURL コメントで名前を付けた 場合に限り表示します。

ブレークポイントを管理する

Firebug ではさまざまな種類のブレークポイントを設置でき、すべてのブレークポイントを ブレークポイント サイドパネル に表示します。開発ツールでは、ソース サイドパネル でそれぞれのスクリプトソースの下にブレークポイントを表示します。このパネルで、ひとつあるいはすべてのブレークポイントを有効化または無効化する、およびブレークポイントを削除することができます。現在は、スクリプトのブレークポイントのみ設置できます。XHR、DOM、Cookie、エラーのブレークポイントは未サポートです (バグ 821610バグ 1004678バグ 895893バグ 1165010 をご覧ください)。単一の JavaScript エラーに対するブレークポイントはありませんが、デバッガー パネルのオプション に、例外発生で停止 する設定があります。

コードでステップ実行を行う

スクリプトの実行が停止すると、コンティニュー (F8)、ステップオーバー (F10)、ステップイン (F11)、ステップアウト (Shift+F11) を使用してコードをステップ実行できます。これらは、どちらのツールでも動作します。

コールスタックを調査する

スクリプトの実行が停止したとき、Firebug は スタック サイドパネル に、関数のコールスタックを表示します。ここでは、呼び出し時の引数とともに関数を一覧表示します。開発ツールでは、コールスタック サイドパネル に関数のコールスタックを表示します。開発ツールで引数を確認するには、変数 サイドパネル を見なければなりません。

変数を調査する

Firebug は ウォッチ サイドパネル に、既定で window オブジェクト (グローバルスコープ) を表示します。スクリプトの実行が停止すると、現在のコールスタックフレームで使用できるさまざまな変数スコープを表示します。さらに、ウォッチ式を追加および操作できます。開発ツールには 変数 サイドパネル があり、基本的な働きは同じです。大きな違いは、変数 サイドパネルはスクリプトの実行が停止していないときに空である、すなわち window オブジェクトを表示しないことです。ただし、DOM プロパティビューア または ウェブコンソール を使用してオブジェクトを調査できます。

スタイルエディター

Firefox 開発ツールの スタイルエディター で、Firebug の CSS パネル と同様に、さまざまな CSS スタイルシートを調査および編集できます。さらに、新しいスタイルシートの作成や、既存のスタイルシートをインポートしてページに適用することもできます。また、個々のスタイルシートの有効・無効を切り替えることができます。

ソースを切り替える

Firebug の CSS パネルでは CSS ロケーションメニュー を使用して、さまざまな CSS ソースを切り替えることができます。スタイルエディターでは サイドバー を使用します。

スタイルシートを編集する

Firebug の CSS パネル は、3 つのスタイルシート編集方法を提供します。既定の方法は、スタイル サイドパネル でのインライン編集です。このほかに ソース編集モードとライブ編集モード があり、選択したスタイルシートをテキストエディターで編集できます。開発ツールのスタイルエディターの編集方法は、Firebug のライブ編集モードに相当する 1 つだけです。

パフォーマンスツール

Firebug では コンソール パネルの "プロファイル" ボタン、または console.profile() および console.profileEnd() コマンドを使用して、JavaScript のパフォーマンスをプロファイリングできます。開発ツールでは、パフォーマンスのプロファイリングについて高度なツールを提供します。Firebug と同様に console.profile() および console.profileEnd() を使用するか、パフォーマンスツール の "パフォーマンス記録の状態を切り替えます" ボタンを使用してプロファイルを作成できます。コールツリー の出力が Firebug の出力にもっとも似ていますが、パフォーマンスパネルでは単なる JavaScript のパフォーマンスだけでなく、より多くの情報を提供します。例えば、HTML のパースやレイアウトに関する情報も提供します。

ネットワークモニター

ネットワークリクエストを監視するために、Firebug には ネット パネル があります。Firefox 開発ツールでは ネットワークモニター を使用して、ネットワーク通信を調査できます。どちらのツールも、ネットワークリクエストの要求や応答を表すタイムラインなど、よく似た情報を提供します。

ストレージインスペクター

Firebug の Cookie パネル はページが作成した Cookie に関する情報を表示しており、Cookie が保存している情報を操作できます。開発ツールでは、ストレージインスペクター にこの機能があります。Firebug と比較すると、ストレージインスペクターは Cookie だけでなくローカルストレージ、セッションストレージ、キャッシュ、IndexedDB データベースといったストレージも調査できます。

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yyss
 最終更新者: yyss,