ウェブコンソールのほとんどは、メッセージ表示ペインが占めています:
それぞれのメッセージは、個別の行に表示します:
| 時刻 | メッセージを記録した時刻です。これはデフォルトで表示しません。開発ツールのオプション で、タイムスタンプを表示するように設定できます。 |
| カテゴリー |
メッセージの種類を示します:
|
| タイプ | ネットワークリクエストと対話式の入出力を除くすべてのメッセージにおいて、メッセージがエラー (X)、警告 (!)、ログ (i) のどれかを示すアイコンです。 |
| メッセージ | メッセージ本文です。 |
| 発生回数 | 警告やエラーを表す行が複数発生した場合はログを 1 回だけ記録して、何回発生したかを示すカウンターを表示します。 |
| ファイル名と行番号 |
JavaScript、CSS、console API のメッセージでは、メッセージからコードの特定の行までたどることができます。コンソールはメッセージが発生したファイル名および行へのリンクを提供します。 Firefox 36 より、列番号も表示します。 |
デフォルトでは、新しいページに移動したり現在のページを再読み込みしたりするたびにコンソールの内容が消去されます。オプション で "ログ出力を残す" にチェックを入れると、この動作が変わります。
ネットワークのログメッセージは、デフォルトで表示しません。ログを表示するには、フィルタリング機能を使用してください。
ネットワークリクエストは、以下のような行で記録されます:
| 時刻 | メッセージを記録した時刻 |
| カテゴリー | メッセージが HTTP リクエストであることを示す |
| メソッド |
具体的な HTTP リクエストメソッド XMLHttpRequest として実行したリクエストである場合は、それを示すマークをつけます:
|
| URI | ターゲットの URI |
| サマリー | HTTP バージョン、ステータスコード、完了までにかかった時間 |
メッセージをクリックすると ネットワークパネル に移動します。ネットワークパネルでは該当するリクエストを選択して、詳細なリクエストおよびレスポンスの情報を右側のパネルに表示します。Firefox 43 以前では、ポップアップウィンドウでこれらの情報表示します。
Firefox 48 より、これらの詳細情報の多くをウェブコンソールから離れることなくインラインで確認できます。ネットワークリクエストの項目の隣に、展開用の三角印があります。クリックすると以下の情報を表示します:
{{EmbedYouTube("cFlcWzJ9j4I")}}
JavaScript のメッセージは以下のようなものです:
JavaScript のエラーには、問題を解決するための付加的なアドバイスを提供する JavaScript エラーリファレンス に案内する、"詳細" リンクがあります:
{{EmbedYouTube("OabJc2QR6o0")}}
Firefox 55 より、ウェブコンソールが ソースマップ を理解します。つまり JavaScript のソースが圧縮されている場合に、ソースマップを与えることができます。ソース内でメッセージやエラーが発生すると、ウェブコンソールは非圧縮版の元のソースに基づいてそれらを表示します。
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 Worker、Service Worker、アドオン、ブラウザー Worker から発生したメッセージは、デフォルトで表示しません。ログを表示するには、フィルタリング 機能を使用してください。
ロギングカテゴリーには、Console API を使用して発生させたログが含まれます。
ウェブコンソールでは、以下の Console API のメッセージをサポートします:
assert()clear() (Firefox 48 の新機能)count()dir()dirxml()error()exception()group()groupEnd()info()log()table()time()timeEnd()trace()warn()コンソールは以下のように、すべてのエラーメッセージでスタックトレースを表示します:
function foo() {
console.error("it explodes");
}
function bar() {
foo();
}
function doStuff() {
bar();
}
doStuff();
サーバーサイドのログメッセージは、Firefox 43で導入されましたが、Firefox 56で削除されました。この機能を(再度)使用するには Chrome Logger extension インストールしてください。
Chrome Logger extensionを使うと、サーバーから送信されたメッセージをウェブコンソールで表示できます。これにより、サーバーサイドのコードのデバッグにウェブコンソールを使用できます。
これは、Chrome Logger プロトコルを使用します。手短に言えば、仕組みは以下のとおりです:
X-ChromeLogger-Data というレスポンスヘッダーで、クライアントに送信します。サーバー側のコードに適したライブラリーを探すには、Chrome Logger のドキュメント をご覧ください。
ウェブコンソールのコマンドライン を使用してブラウザーに送信したコマンドとそれに対する応答は、以下のような行で記録されます:
濃い灰色のバーは入力/出力メッセージであることを表し、また三角印の向きで入力と出力を区別します。
上段のツールバーで、表示する結果を制限できます。
カテゴリー名 ("ネットワーク"、"CSS" など) が記載されたボタンをクリックすると、特定の種類のメッセージのみ表示することができます。ボタン本体をクリックすると、そのカテゴリー全体のオン/オフを切り替えます。また右側の矢印部分をクリックすると、より細かいフィルタリング方法を表示します。
"出力を絞り込み" と表示されているテキストボックスに文字列を入力すると、その文字列を含むメッセージのみ表示します。
最後に、このツールバーでログを消去することもできます。Firefox 48 より前のバージョンでは、ツールバーの右側にある "消去" ボタンです。Firefox 48 以降では、左側にあるゴミ箱のアイコンです。