MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

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

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

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

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

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

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

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

メッセージのカテゴリー

ネットワーク

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

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

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

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

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

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

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

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

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

  • ヘッダー: 要求ヘッダーと応答ヘッダー
  • 応答: 応答ボディ
  • Cookie: リクエストとともに送信した Cookie
  • コールスタック (Firefox 50 の新機能): XMLHttpRequestFetch のように JavaScript が開始したリクエストで、リクエストを行った個所のコールスタックを確認できます。

JS

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

Firefox 49 の新機能

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

ソースマップ

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

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

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

ソースマップのサポートはまだ実験的ですので注意してください。バグが存在したり、コンソールの出力が遅くなったりするかもしれません。ソースマップのサポートをデフォルトで有効化する前に必要な作業を Bug 1289570 で追跡しています。

CSS

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

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

リフローイベント

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

リフローは計算負荷が高い場合があり、またユーザーインターフェイスに直接作用するため、ウェブサイトやウェブアプリの応答性に大きな影響を与えることがあります。ウェブコンソールはリフローイベントを記録することにより、リフローイベントが発生した時の実行にどれだけ時間がかかったか、またリフローが 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 の操作中に要素のスタイルの読み書きを挟み込むことを避けるのはよいアイデアです。

セキュリティ

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

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

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

メッセージ 詳細
混在アクティブコンテンツの読み込みをブロックしました ページに混在アクティブコンテンツが含まれています: すなわちメインページは 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 をご覧ください。
パスワードフィールドが安全でない (http://) ページ上にあり、ユーザーのログイン情報の盗難を許すセキュリティ上の危険性があります。 ログインフォームを含むページは、HTTP ではなく HTTPS で提供しなければなりません。
パスワードフィールドが安全でない (http://) フォームアクションを持つフォーム要素内にあり、ユーザーのログイン情報の盗難を許すセキュリティ上の危険性があります。 パスワードフィールドを含むフォームは、HTTP ではなく HTTPS で送信しなければなりません。
パスワードフィールドが安全でない (http://) iframe 内にあり、ユーザーのログイン情報の盗難を許すセキュリティ上の危険性があります。 ログインフォームを含む iframe は、HTTP ではなく HTTPS で提供しなければなりません。
サイトに無効な Strict-Transport-Security ヘッダーが指定されています。 詳しくは HTTP Strict Transport Security をご覧ください。

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

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

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

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

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

ロギング

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

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

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

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

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

function bar() {
  foo();
}

function doStuff() {
 bar();
}

doStuff();

サーバー

Firefox 43 の新機能

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

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

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

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

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

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

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

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

フィルタリングと検索

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

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

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

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

文字列でフィルタリング

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

ログを消去する

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

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

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