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 の式を実行することができます。両者の表示は若干異なっています。これは {{bug(1269730)}} で変更する予定です。
Firebug にはログメッセージのフィルタリング方法が 2 つあり、ひとつは オプションメニュー、もう一つはツールバーの フィルターボタン です。開発ツールのコンソールは、ツールバー内のフィルターボタン で同様の機能を提供しており、ひとつの方法にまとめられています。
Firebug のコマンドライン API は、利便性のための特別な機能を提供します。開発ツールのコマンドラインに ある程度共通の機能 がありますが、異なる機能や欠けている機能があります。
ウェブページ内からコンソールに何かを記録するために Firebug は、ウェブページで使用できる Console API を作成しました。開発ツールも 同じ API を共有しており、console.* 文が引き続き動作します。
Firebug ではツールバーの 持続 ボタン を押すと、ページを移動したり再読み込みしたりしてもメッセージを残すことができます。開発ツールではこの設定が ログ出力を残す という名称であり、ツールボックスのオプションパネル内にあります。
FirePHP のような Firebug 拡張で、サーバーサイドのメッセージを Firebug のコンソールに記録できます。この機能は ChromeLogger プロトコルを使用してすでに 開発ツールに統合されており、拡張機能のインストールは不要です。
Firebug のコマンドラインにあるボタンで使用できる コマンド履歴 は、開発ツールのコマンドラインで ↑/↓ を押下する ことで使用できます。
コンソールに記録されたオブジェクトをクリックすると、DOM パネル でオブジェクトのプロパティやメソッドを調査できます。Firefox 開発ツールでも、オブジェクトを調査できます。Firebug との違いは、ウェブコンソール内のサイドパネルにプロパティやメソッドを表示する ことです。
Firebug のコンソールパネルで、({{Glossary("XMLHttpRequest", "XMLHttpRequests")}} による) {{Glossary("AJAX")}} リクエストを記録できます。この設定は開発ツールのウェブコンソールでも、ネットワーク > XHR で使用できます。さらにウェブコンソールでは ネットワーク > ログ で、ほかのネットワークリクエストもすべて表示できます。
JSON や {{Glossary("AJAX")}} リクエストの XML レスポンスを表示するために、Firebug にはコンソールパネル内でリクエストを展開する特別なタブがあります。開発ツールのウェブコンソールはこのような構造を、"応答" タブに直接表示します。
Firebug のコンソールは Command Editor と呼ばれる、複数行のコマンドラインです。開発ツールには Command Editor のようなサイドパネルはありませんが (これは {{bug(1133849)}} で要望されています)、スクラッチパッド と呼ばれる別のツールがあります。これは パネルとしてツールボックスに追加する か、Firefox メニュー > 開発ツール > スクラッチパッド または Shift + F4 で個別のウィンドウとして開くことができます。また通常のコマンドラインも、document. のような未完了のコマンドを認識した場合は、Enter を押下すると賢く改行を入力します。さらに、Shift + Enter を押下すれば手動で改行を入力できます。
Firebug でコンソールに記録されたネットワークリクエストを展開すると、プレビュー タブがあります。ウェブコンソールでは、応答 タブでプレビューを表示します。現在は HTML、XML、SVG のプレビュー機能が欠けていますが、{{bug(1247392)}} および {{bug(1262796)}} で要望されています。ただし、リクエストの URL をクリックすると ネットワークモニター に切り替わり、こちらに プレビュー タブがあります。
Firebug には HTML パネル があり、HTML/XML/SVG や、それらに関係する CSS を編集できます。開発ツールでは、インスペクター でこの機能を提供します。
インスペクターでは Firebug と同様に、タグの属性やコンテンツをインラインで編集できます。さらに、タグ名もインラインで編集できます。
HTML を直接編集することもできます。Firebug ではノードを右クリックして、コンテキストメニューの [HTML を編集] を選択します。開発ツールのコンテキストメニューにも、このメニュー項目があります。開発ツールでは [HTML として編集] という名称です。変更箇所のライブプレビュー機能だけが現時点で欠けており、{{bug(1067318)}} および {{bug(815464)}} で扱っています。
Firebug の HTML パネルでは要素のコンテキストメニューで、要素の innerHTML や outerHTML、CSS、XPath をコピーできます。インスペクターは XPath のコピーを除く、同じ機能を提供します。XPath のコピーは {{bug(987877)}} で扱っています。
どちらのツールも、ノードビューで選択した要素に関係する CSS ルールを、同様の方法で閲覧および編集できます。Firebug には スタイル サイドパネル、開発ツールには ルール サイドパネル があります。
Firebug では、右クリックしてコンテキストメニューの [ルールを追加] を選択すると、新しいルールを追加します。開発ツールでも新しいルールを作成するために、コンテキストメニューの [新しいルールを追加] という項目と、ルールパネルのツールバーの [+] ボタン があります。
要素のスタイルを編集する、すなわち要素の {{htmlattrxref("style")}} 属性の CSS プロパティを編集するために、Firebug ではスタイルパネルを右クリックして、コンテキストメニューの [要素のスタイルを編集] を選択しなければなりません。開発ツールでは、この目的で 要素 {} ルール があり、ここを 1 回クリックするだけでプロパティを編集できます。
Firebug と同様に、ルールビューで CSS プロパティの名称や値のオートコンプリートを提供します。一部のプロパティ値はまだオートコンプリートができず、{{bug(1337918)}} で扱っています。
Firebug の スタイル サイドパネルも開発ツールの ルール サイドパネルもコンテキストメニューに、CSS ルールやスタイル宣言をコピーするためのメニュー項目があります。さらに開発ツールには、ルールのセレクターをコピーするメニュー項目や、コメントアウトにより無効なプロパティ宣言をコピーする機能があります。スタイル宣言全体をコピーする項目が欠けていますが、パネル内でそれらを選択して Ctrl+C またはコンテキストメニューを使用してコピーすることにより実現できます。
開発ツールの ルール サイドパネルは、CSS を貼り付けるときの動作がよりスマートです。コメントアウトされたプロパティ宣言を自動的に無効化して、スタイル宣言全体を既存のルールに貼り付けできます。
Firebug の スタイル サイドパネルのオプションメニュー で、要素の {{cssxref(":hover")}}、{{cssxref(":active")}}、{{cssxref(":focus")}} 疑似クラスを切り替えることができます。開発ツールでは、同じことを行う方法が 2 つあります。ひとつは ルール サイドパネル内の疑似クラスパネル で切り替える方法です。もうひとつはノードビューで要素を右クリックして、コンテキストメニュー で疑似クラスを切り替える方法です。
スタイル サイドパネルで [簡略プロパティを展開] を設定すると、CSS ショートハンドプロパティ を、関係があるロングハンドプロパティに展開できます。開発ツールのルールパネルはよりスマートであり、プロパティのそばにある三角印をクリックすると、個々のショートハンドプロパティを展開できます。
Firebug のスタイル サイドパネル に、選択した要素に適用された CSS ルールのプロパティのみ表示して、上書きされたスタイルはすべて隠す設定があります。開発ツールの ルール サイドパネル にそのような機能はありませんが、{{bug(1335327)}} で要望されています。
Firebug では、レイアウト サイドパネル で ボックスモデル を調査できます。開発ツールでは、ボックスモデルが 計算済み サイドパネルの一部になっています。どちらのツールもボックスモデルビューにマウスポインタを載せると、ページ上でボックスモデルのさまざまな部分を強調表示します。また、どちらのツールもボックスモデルをクリックすると、さまざまな値をインラインで編集できます。
Firebug の 累積 サイドパネル と同様に、開発ツールの 計算済み サイドパネル で CSS プロパティの計算済みの値を表示します。両者の違いは、開発ツールはプロパティを常にアルファベット順に並べておりグループ化しないこと ({{bug(977128)}} をご覧ください) と、Mozilla 特有のスタイルを隠すオプションがないことです。このため、開発ツールにはプロパティをフィルタリングするための入力フィールドがあります。
Firebug では、要素に割り当てられたイベントを イベント サイドパネル に表示します。開発ツールでは、ノードビューで要素のそばにある小さな 'ev' アイコンをクリックすると、イベントを表示します。どちらのツールも、ラップされたイベントリスナー (例えば、 jQuery の関数でラップしたリスナー) を表示できます。開発ツールの UI を改善するため、Firebug のようなイベントサイドパネルを追加する要望が出ています ({{bug(1226640)}} をご覧ください)。
Firebug は DOM が変化したとき、すなわち要素が変更されたときにブレークして、JavaScript ファイルの関連する行でスクリプトの実行を止めます。これは、DOM の変化を起こした場所です。この機能は 変化したらブレーク ボタン でグローバルに有効化するか、要素ごと および属性変化・内容の変化・要素削除といった種類ごとに有効化できます。残念ながら、開発ツールにはまだこの機能がありません ({{bug(1004678)}} をご覧ください)。スクリプトの実行を止めるには、変化させている行に デバッガー パネル でブレークポイントを設定しなければなりません。
Firebug は、HTML パネルで CSS セレクターや XPath で要素を検索できます。開発ツールの インスペクター パネルも、CSS セレクターで検索できます。また、マッチする ID やクラスのリストを表示します。しかし、XPath による検索は未サポートです ({{bug(963933)}} をご覧ください)。
Firebug の スクリプト パネル に相当するものが、開発ツールの デバッガー パネル です。どちらも、ウェブサイトで実行する JavaScript コードをデバッグできます。
Firebug には、ウェブサイトに関係するすべての JavaScript ソースを表示する スクリプトロケーションメニュー があります。これらのソースは静的なもの (すなわち、ファイル) や、動的に生成されるもの (すなわち、イベントハンドラで実行するスクリプト、eval()、new Function() など) があり得ます。開発ツールの デバッガー パネルでは、スクリプトを左側の ソース サイドパネル に一覧表示します。動的に生成されるスクリプトは、//# sourceURL コメントで名前を付けた 場合に限り表示します。
Firebug ではさまざまな種類のブレークポイントを設置でき、すべてのブレークポイントを ブレークポイント サイドパネル に表示します。開発ツールでは、ソース サイドパネル でそれぞれのスクリプトソースの下にブレークポイントを表示します。このパネルで、ひとつあるいはすべてのブレークポイントを有効化または無効化する、およびブレークポイントを削除することができます。現在は、スクリプトのブレークポイントのみ設置できます。XHR、DOM、Cookie、エラーのブレークポイントは未サポートです ({{bug(821610)}}、{{bug(1004678)}}、{{bug(895893)}}、{{bug(1165010)}} をご覧ください)。単一の JavaScript エラーに対するブレークポイントはありませんが、デバッガー パネルのオプション に、例外発生で停止 する設定があります。
スクリプトの実行が停止すると、コンティニュー (F8)、ステップオーバー (F10)、ステップイン (F11)、ステップアウト (Shift+F11) を使用してコードをステップ実行できます。これらは、どちらのツールでも動作します。
スクリプトの実行が停止したとき、Firebug は スタック サイドパネル に、関数のコールスタックを表示します。ここでは、呼び出し時の引数とともに関数を一覧表示します。開発ツールでは、コールスタック サイドパネル に関数のコールスタックを表示します。開発ツールで引数を確認するには、変数 サイドパネル を見なければなりません。
Firebug は ウォッチ サイドパネル に、既定で {{domxref("window")}} オブジェクト (グローバルスコープ) を表示します。スクリプトの実行が停止すると、現在のコールスタックフレームで使用できるさまざまな変数スコープを表示します。さらに、ウォッチ式を追加および操作できます。開発ツールには 変数 サイドパネル があり、基本的な働きは同じです。大きな違いは、変数 サイドパネルはスクリプトの実行が停止していないときに空である、すなわち window オブジェクトを表示しないことです。ただし、DOM プロパティビューア または ウェブコンソール を使用してオブジェクトを調査できます。
Firefox 開発ツールの スタイルエディター で、Firebug の CSS パネル と同様に、さまざまな CSS スタイルシートを調査および編集できます。さらに、新しいスタイルシートの作成や、既存のスタイルシートをインポートしてページに適用することもできます。また、個々のスタイルシートの有効・無効を切り替えることができます。
Firebug の CSS パネルでは CSS ロケーションメニュー を使用して、さまざまな CSS ソースを切り替えることができます。スタイルエディターでは サイドバー を使用します。
Firebug の CSS パネル は、3 つのスタイルシート編集方法を提供します。既定の方法は、スタイル サイドパネル でのインライン編集です。このほかに ソース編集モードとライブ編集モード があり、選択したスタイルシートをテキストエディターで編集できます。開発ツールのスタイルエディターの編集方法は、Firebug のライブ編集モードに相当する 1 つだけです。
Firebug のセレクタ サイドパネルに、CSS セレクタを検証する機能があります。これは、入力したセレクタにマッチするすべての要素を表示します。開発ツールにこの機能はありませんが、{{bug(1323746)}} で要望されています。
Firebug では、検索フィールドでスタイルシート内を検索できます。開発ツールのスタイルエディターにもスタイルシート内を検索する機能がありますが、現在は複数のスタイルシートを検索する機能 ({{bug(889571)}} を参照) および正規表現で検索する機能 ({{bug(1362030)}} を参照) がありません。
Firebug では コンソール パネルの "プロファイル" ボタン、または console.profile() および console.profileEnd() コマンドを使用して、JavaScript のパフォーマンスをプロファイリングできます。開発ツールでは、パフォーマンスのプロファイリングについて高度なツールを提供します。Firebug と同様に console.profile() および console.profileEnd() を使用するか、パフォーマンスツール の "パフォーマンス記録の状態を切り替えます" ボタンを使用してプロファイルを作成できます。コールツリー の出力が Firebug の出力にもっとも似ていますが、パフォーマンスパネルでは単なる JavaScript のパフォーマンスだけでなく、より多くの情報を提供します。例えば、HTML のパースやレイアウトに関する情報も提供します。
これは Firebug と開発ツールで出力内容が完全に異なるため、もっとも違いが大きい部分です。Firebug は JavaScript のパフォーマンスに注目しており、プロファイリングセッション内の JavaScript 関数呼び出しに関する詳細情報を提供します。一方開発ツールは JavaScript の関数呼び出しに限らず、ウェブ際のパフォーマンスに関する広範な情報を提供します。
Firebug の プロファイラーの出力 にもっとも近いものが、パフォーマンス パネルの 呼び出しツリービュー です。これは Firebug と同様に、合計時間 にそれぞれの関数呼び出しの総実行時間、サンプル に呼び出し回数、時間 に関数内で費やした時間、そして総実行時間に対する関数の実行時間の割合を表示します。
注記: 開発ツールの呼び出しツリービューに表示する時間と割合は、Firebug が表示する値と同等ではありません。これは、JavaScript コードの実行状態をサンプリングするために使用する API が異なるためです。
Firebug のプロファイラーと同様に、開発ツールのパフォーマンスツールの 呼び出しツリービュー から、呼び出した JavaScript 関数が定義されているコードの行に移動できます。Firebug では関数へのリンクが コンソールパネル の出力の右側にありますが、開発ツールでは呼び出しツリービューの右側にリンクがあります。
ネットワークリクエストを監視するために、Firebug には ネット パネル があります。Firefox 開発ツールでは ネットワークモニター を使用して、ネットワーク通信を調査できます。どちらのツールも、ネットワークリクエストの要求や応答を表すタイムラインなど、よく似た情報を提供します。
Firebug も Firefox 開発ツールのネットワークモニターも、リクエストをクリックすると、リクエストに関する情報を調査できます。唯一の違いは、Firebug はリクエストの下に情報を表示しますが、ネットワークモニターはサイドパネルに情報を表示することです。
どちらのツールも、選択したリクエストのさまざまな情報を表示するタブがあります。ヘッダー、パラメーター、応答、Cookie のパネルがあります。レスポンスのプレビューは、HTML のように具体的な名称のパネルで表示します。ネットワークモニターでは、プレビュー用に プレビュー パネルがあります。キャッシュ済みデータの情報を提供する機能は未実装です ({{bug(859051)}})。一方、Firebug の情報に加えて セキュリティ の情報を表示します。また、ネットワークのタイミングに関する詳細情報を提供する タイミング タブもあります。
Firebug では ネットパネルのタイムライン列 にマウスポインターを載せると、リクエストに関するネットワークタイミングの詳細情報を表示します。ネットワークモニターはこの情報を、リクエストを選択したときに タイムライン サイドパネル で表示します。
Firebug では、リクエストのリモートアドレスを リモート IP 列に表示します。ネットワークモニターでは、リクエストを選択したときに ヘッダー タブの リモートアドレス に表示します。
Firebug の検索フィールドで、リクエストを検索できます。Firefox の開発ツールの検索フィールドは、入力した文字列でリクエストをフィルタリングします。
Firebug では 検索フィールドのオプション で レスポンス本文 にチェックを入れると、ネットワークリクエストのレスポンスボディを検索できます。ネットワークモニターではこの機能が未提供ですが、{{bug(1334408)}} で要望されています。レスポンスボディはまだ検索できませんが、ネットワークモニターでは さまざまなリクエスト属性でフィルタリングする ことができます。
Firebug の Cookie パネル はページが作成した Cookie に関する情報を表示しており、Cookie が保存している情報を操作できます。開発ツールでは、ストレージインスペクター にこの機能があります。Firebug と比較すると、ストレージインスペクターは Cookie だけでなくローカルストレージ、セッションストレージ、キャッシュ、IndexedDB データベースといったストレージも調査できます。
Firebug は、ウェブサイトに関係するすべての Cookie を Cookie パネル に表示します。開発ツールでは Cookie を、ストレージインスペクター の Cookie セクションに、ドメインごとにグループ化して表示します。どちらも Cookie ごとに名前、値、ドメイン、パス、有効期限、Cookie が HttpOnly であるかといった、ほとんど同じ情報を表示します。
開発ツールは Cookie が Secure であるかをデフォルトで表示しませんが、表の見出しを右クリックしてコンテキストメニューで Secure にチェックを入れると有効化できます。さらに開発ツールは、Cookie の作成日時、最終アクセス日時、HostOnly であるかの情報も表示できます。
Firebug で Cookie を編集するには、Cookie を右クリックしてコンテキストメニューで 編集 を選択しなければなりません。ダイアログボックスがポップアップしますので、Cookie を編集して保存します。ストレージインスペクターでは、編集したいデータをダブルクリックするだけです。インラインエディターで、値を編集できます。
Firebug の Cookie パネルでは、メニューの Cookie > Cookie を削除 または Ctrl+Shift+O で、ウェブサイトのすべての Cookie を削除できます。また、Cookie > セッション Cookie を削除 でセッション Cookie のみ削除、Cookie を右クリックして 削除 を選択するとひとつの Cookie を削除できます。開発ツールのストレージインスペクターでは、Cookie を右クリックして すべて削除 を選択するとすべての Cookie を削除、それぞれの "<Cookie 名>" を削除 を選択するとひとつの Cookie を削除できます。さらに、コンテキストメニューの "<ドメイン名>" のすべてのアイテムを削除 で、特定のドメインのすべての Cookie を削除できます。現在、セッション Cookie のみ削除することはできません ({{bug(1336934)}})。
ページで JavaScript エラーがあるとき、Firebug はその数を スタートボタンにバッジで表示します。開発ツールでは、開発ツールバー にエラー数を表示します。
Firebug はさまざまな コマンド を提供しており、コマンドラインで実行できます。開発ツールバーも、開発ツールを制御してさまざまなタスクを実行するための 多種多様なコマンドとともに API を提供します。