コンソールのメッセージ

Web コンソールのほとんどは、メッセージ表示ペインが占めています:

それぞれのメッセージは、個別の行に表示します:

デフォルトでは、新しいページに移動したり現在のページを再読み込みしたりするたびにコンソールの内容が消去されます。オプションで "ログ出力を残す" にチェックを入れると、この動作が変わります。

メッセージのカテゴリ

ネットワーク

ネットワークリクエストは、以下のような行で記録されます:

ネットワークリクエストを詳しく確認する

メッセージをクリックするとネットワークパネルに移動します。ネットワークパネルでは該当するリクエストを選択して、詳細なリクエストおよびレスポンスの情報を右側のパネルに表示します。Firefox 43 以前では、ポップアップウィンドウでこれらの情報表示します。

Firefox 48 より、これらの詳細情報の多くを Web コンソールから離れることなくインラインで確認できます。ネットワークリクエストの項目の隣に、展開用の三角印があります。クリックすると以下の情報を表示します:

• ヘッダ: 要求ヘッダと応答ヘッダ
• 応答: 応答ボディ
• Cookie: リクエストとともに送信した Cookie

JS

JavaScript のメッセージは以下のようなものです:

"詳細" リンク

JavaScript のエラーには、問題を解決するための付加的なアドバイスを提供する JavaScript エラーリファレンス に案内する、"詳細" リンクがあります:

ソースマップ

Firefox 50 より、Web Console がソースマップを理解します。つまり JavaScript のソースが圧縮されている場合に、ソースマップを与えることができます。ソース内でメッセージやエラーが発生すると、Web コンソールは非圧縮版の元のソースに基づいてそれらを表示します。

現在、ソースマップのサポートはまだ実験的であるため、デフォルトで無効化しています。有効化するには "about:config" に移動して、設定項目 "devtools.sourcemap.locations.enabled" を true に設定してください。

CSS

CSS のメッセージは以下のようなものです:

リフローイベント

Web コンソールは、CSS カテゴリでリフローのイベントも記録します。リフローは、ブラウザがページの全体あるいは一部分のレイアウトを計算する処理に与えられた名称です。レイアウトに影響があるとブラウザが考えるような変化がページで起きたときに、リフローが発生します。以下に挙げるものを含めて、多くのイベントがリフローを発生させます: ブラウザウィンドウのリサイズ、:hover のような疑似クラスのアクティブ化、JavaScript による DOM の操作。

リフローは計算負荷が高い場合があり、またユーザインターフェイスに直接作用するため、Web サイトや Web アプリの応答性に大きな影響を与えることがあります。Web コンソールはリフローイベントを記録することにより、リフローイベントが発生した時の実行にどれだけ時間がかかったか、またリフローが JavaScript によって発生された同期リフローである場合に、どのコードが発生させたかの情報を手供します。

リフローイベントは "リフロー" メッセージとして、CSS のエラーや警告とは別に記録されます。デフォルトでは、これは無効になっています。有効にするにはツールバーの "CSS" ボタンをクリックして、"リフロー" を選択してください。

各々のメッセージは "再描画" というラベルがつき、リフローの実行にかかった時間を表示します:

リフローが JavaScript によって発生された同期リフローである場合は、リフローを発生させたコードの行へのリンクも表示します:

リンクをクリックすると、そのファイルをデバッガで開きます。

同期リフローと非同期リフロー

現在のレイアウトを無効にする変更がなされる、例えばブラウザのウィンドウをリサイズしたり、ある JavaScript が要素の CSS を変更したりしても、レイアウトが直ちに再計算されるわけではありません。代わりにリフローは非同期に、ブラウザが必要と判断した時点 (通常、ブラウザが次に再描画を行うとき) で実行します。この方法により、ブラウザは無効化する変更点を蓄えておいて一度にそれらの影響を再計算することができます。

しかし、ある JavaScript コードが変更されたスタイルを読み取ると、ブラウザは返す計算値を算出するために同期リフローを実行しなければなりません。例えば以下のようなコードでは、window.getComputedStyle(thing).height を呼び出した時に直ちに同期リフローが発生します:

var thing = document.getElementById("the-thing");
thing.style.display = "inline-block";
var thingHeight = window.getComputedStyle(thing).height;

以前のスタイル書き込みによって無効化されたスタイルを読み取るたびに同期リフローを強いるため、DOM の操作中に要素のスタイルの読み書きを挟み込むことを避けるのはよいアイデアです。

セキュリティ

セキュリティの警告とエラーは以下のようなものです:

Web コンソールに表示されるセキュリティメッセージは、サイト内の潜在的あるいは実在の脆弱性を開発者が発見することを支援します。加えて、これらのメッセージの多くは開発者の教育に役立ちます。これは、背景に関する情報や問題を緩和するためのアドバイスを記載したページに案内する、“詳細”リンクが終わりにあるためです。

すべてのセキュリティメッセージの一覧を以下に掲載します:

Bug 863874 は、Web コンソールで適切なセキュリティメッセージを記録することに関するメタバグです。ここで議論されているような役に立つ機能のアイデアがある、あるいは貢献に興味がある場合は、メタバグとその依存関係を確認してください。

ロギング

ロギングカテゴリには、Console API を使用して発生させたログが含まれます。

Web コンソールでは、以下の Console API のメッセージをサポートします:

• assert()
• clear() (Firefox 48 の新機能)
• count()
• dir()
• dirxml()
• error()
• exception()
• info()
• log()
• table()
• time()
• timeEnd()
• trace()
• warn()

コンソールは以下のように、すべてのエラーメッセージでスタックトレースを表示します:

function foo() {
  console.error("it explodes");
}

function bar() {
  foo();
}

function doStuff() {
 bar();
}

doStuff();

サーバ

Firefox 43 より、サーバから送信されたメッセージを Web コンソールで表示できます。これにより、サーバサイドのコードのデバッグに Web コンソールを使用できます。

これは、Chrome Logger プロトコルを使用します。手短に言えば、仕組みは以下のとおりです:

• サーバサイドのコード (Python、PHP、Node.js など) に、console API を提供するライブラリを含めます。
• サーバサイドのコードで、console API を使用してメッセージを記録します。
• サーバサイドのライブラリがメッセージから JSON オブジェクトを作成して、送信用にエンコードします。
• メッセージを X-ChromeLogger-Data というヘッダのレスポンスとして、クライアントに送信します。
• Web コンソールが、ヘッダをデコードして表示します。

サーバ側のコードに適したライブラリを探すには、Chrome Logger のドキュメントをご覧ください。

コマンドラインの入力/出力

Web コンソールのコマンドラインを使用してブラウザに送信したコマンドとそれに対する応答は、以下のような行で記録されます:

濃い灰色のバーは入力/出力メッセージであることを表し、また三角印の向きで入力と出力を区別します。

フィルタリングと検索

カテゴリでフィルタリング

上段のツールバーで、表示する結果を制限できます。

カテゴリ名 ("ネットワーク"、"CSS" など) が記載されたボタンをクリックすると、特定の種類のメッセージのみ表示することができます。ボタン本体をクリックすると、そのカテゴリ全体のオン/オフを切り替えます。また右側の矢印部分をクリックすると、より細かいフィルタリング方法を表示します。

• ネットワーク
  • エラー
  • 警告
  • XHR
  • ログ
• CSS
  • エラー
  • 警告
  • リフロー
• JS
  • エラー
  • 警告
• セキュリティ
  • エラー
  • 警告
• ロギング
  • エラー
  • 警告
  • メッセージ
  • ログ
  • Shared Worker
  • Service Worker
  • アドオンまたはブラウザ Worker
• サーバ
  • エラー
  • 警告
  • メッセージ
  • ログ

文字列でフィルタリング

"出力を絞り込み" と表示されているテキストボックスに文字列を入力すると、その文字列を含むメッセージのみ表示します。

ログを消去する

最後に、このツールバーでログを消去することもできます。Firefox 48 より前のバージョンでは、ツールバーの右側にある "消去" ボタンです。Firefox 48 以降では、左側にあるゴミ箱のアイコンです。