コンソールのメッセージ

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

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

時刻 メッセージを記録した時刻です。これはデフォルトで表示しません。開発ツールのオプションで、タイムスタンプを表示するように設定できます。
カテゴリ

メッセージの種類を示します:

  • 黒色: ネットワークリクエスト
  • 青色: CSS の警告/エラー/ログ
  • 橙色: JavaScript の警告/エラー
  • 赤色: セキュリティの警告/エラー
  • 緑色: サーバのログ
  • 薄い灰色: Console API のメッセージ
  • 濃い灰色: 対話式コマンドラインインタプリタの入出力
タイプ ネットワークリクエストと対話式の入出力を除くすべてのメッセージにおいて、メッセージがエラー (X)、警告 (!)、ログ (i) のどれかを示すアイコンです。
メッセージ メッセージ本文です。
発生回数 警告やエラーを表す行が複数発生した場合はログを 1 回だけ記録して、何回発生したかを示すカウンタを表示します。
ファイル名と行番号

JavaScript、CSS、console API のメッセージでは、メッセージからコードの特定の行までたどることができます。コンソールはメッセージが発生したファイル名および行へのリンクを提供します。

Firefox 36 より、列番号も表示します。

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

メッセージのカテゴリ

ネットワーク

ネットワークのログメッセージは、デフォルトで表示しません。ログを表示するには、フィルタリング機能を使用してください。

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

時刻 メッセージを記録した時刻
カテゴリ メッセージが HTTP リクエストであることを示す
メソッド

具体的な HTTP リクエストメソッド

XMLHttpRequest として実行したリクエストである場合は、それを示すマークをつけます:

URI ターゲットの URI
サマリー HTTP バージョン、ステータスコード、完了までにかかった時間

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

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

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

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

JS

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

Firefox 49 の新機能

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

ソースマップ

Firefox 50 の新機能 (ただし既定で無効)

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

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

CSS

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

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

メッセージ 詳細
混在アクティブコンテンツの読み込みをブロックしました ページに混在アクティブコンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザはスクリプトなどの "アクティブコンテンツ" を HTTP で読み込むよう求められました。ブラウザはこのアクティブコンテンツをブロックしました。詳しくは混在コンテンツをご覧ください。
混在表示コンテンツの読み込みをブロックしました ページに混在表示コンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザは画像などの "表示コンテンツ" を HTTP で読み込むよう求められました。ブラウザはこの表示コンテンツをブロックしました。詳しくは混在コンテンツをご覧ください。
安全なページ上で (安全でない) 混在アクティブコンテンツを読み込んでいます ページに混在アクティブコンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザはスクリプトなどの "アクティブコンテンツ" を HTTP で読み込むよう求められました。ブラウザはこのアクティブコンテンツを読み込みました。詳しくは混在コンテンツをご覧ください。
安全なページ上で (安全でない) 混在表示コンテンツを読み込んでいます ページに混在表示コンテンツが含まれています: すなわちメインページは HTTPS で提供していますが、ブラウザは画像などの "表示コンテンツ" を HTTP で読み込むよう求められました。ブラウザはこの表示コンテンツを読み込みました。詳しくは混在コンテンツをご覧ください。
サイトに X-Content-Security-Policy/Report-Only ヘッダと Content-Security-Policy/Report-Only ヘッダの両方が指定されています。X-Content-Security-Policy/Report-Only ヘッダは無視されます。 詳しくは Content Security Policy をご覧ください。
X-Content-Security-Policy ヘッダと X-Content-Security-Report-Only ヘッダは推奨されなくなります。代わりに CSP 仕様に準拠した構文の Content-Security-Policy ヘッダと Content-Security-Report-Only ヘッダを使用してください。 詳しくは Content Security Policy をご覧ください。
パスワードフィールドが安全でない (https://) ページ上にあり、ユーザのログイン情報の盗難を許すセキュリティ上の危険性があります。 ログインフォームを含むページは、HTTP ではなく HTTPS で提供しなければなりません。
パスワードフィールドが安全でない (https://) フォームアクションを持つフォーム要素内にあり、ユーザのログイン情報の盗難を許すセキュリティ上の危険性があります。 パスワードフィールドを含むフォームは、HTTP ではなく HTTPS で送信しなければなりません。
パスワードフィールドが安全でない (https://) iframe 内にあり、ユーザのログイン情報の盗難を許すセキュリティ上の危険性があります。 ログインフォームを含む iframe は、HTTP ではなく HTTPS で提供しなければなりません。
サイトに無効な Strict-Transport-Security ヘッダが指定されています。 詳しくは HTTP Strict Transport Security をご覧ください。

このサイトは SHA-1 証明書を利用しています。SHA-1 より強固なハッシュアルゴリズムを使用した証明書の利用をお勧めします。

SHA-1 アルゴリズムを署名で使用している証明書を、サイトで使用しています。

SHA-1 はまだ証明書で広く使用されていますが、陳腐化し始めています。Web サイトや認証局は将来、より強いハッシュアルゴリズムに切り替えることを推奨します。詳しくは Weak Signature Algorithm の記事をご覧ください。

サイト自体の証明書が SHA-1 証明書ではないとしても、サイトの証明書への署名に使用する認証局の証明書で SHA-1 を使用している場合がありますので注意してください。

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

ロギング

Shared WorkerService Worker、アドオン、ブラウザ Worker から発生したメッセージは、デフォルトで表示しません。ログを表示するには、フィルタリング機能を使用してください。

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

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

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

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

function bar() {
  foo();
}

function doStuff() {
 bar();
}

doStuff();

サーバ

Firefox 43 の新機能

サーバサイドのログメッセージは、デフォルトで表示しません。ログを表示するには、フィルタリング機能を使用してください。

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 以降では、左側にあるゴミ箱のアイコンです。

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

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