コンソールでメッセージをログに記録する

Kayce Basques
Kayce Basques
X GitHub

このインタラクティブなチュートリアルでは、Chrome DevTools コンソールでメッセージを記録してフィルタする方法について説明します。

コンソールのメッセージ。

このチュートリアルは、順番に完了することを想定しています。JavaScript を使用してページにインタラクティブ機能を追加する方法など、ウェブ開発の基礎を理解していることを前提としています。

デモと DevTools を設定する

このチュートリアルでは、デモを開いてすべてのワークフローを自分で試せるように設計されています。実際に操作することで、ワークフローを後で思い出しやすくなります。

  1. デモを開きます。

  2. 省略可: デモを別のウィンドウに移動します。この例では、チュートリアルが左側、デモが右側に表示されています。

    左側にチュートリアル、右側にデモが表示されています。

  3. デモにフォーカスを当てて、Control+Shift+J キーまたは Command+Option+J キー（Mac）を押して DevTools を開きます。デフォルトでは、DevTools はデモの右側に開きます。

    デモの右側に DevTools が開きます。

  4. 省略可: DevTools をウィンドウの下部にドッキングするか、固定を解除して別のウィンドウに表示します。

    デモの下部にドッキングされた DevTools: デモの下部に固定された DevTools。

    別のウィンドウで固定解除された DevTools: 別のウィンドウで固定解除された DevTools。

JavaScript から記録されたメッセージを表示する

[Console] に表示されるメッセージのほとんどは、ページの JavaScript を作成したウェブ デベロッパーからのものです。このセクションでは、コンソールに表示される可能性のあるさまざまなメッセージ タイプを紹介し、独自の JavaScript から各メッセージ タイプをログに記録する方法について説明します。

  1. デモの [Log Info] ボタンをクリックします。Hello, Console! がコンソールに記録されます。

    [Log Info] をクリックした後のコンソール。

  2. Hello, Console! メッセージの横にある [Console] の [log.js:2] をクリックします。[Sources] パネルが開き、メッセージがコンソールに記録された原因となったコード行がハイライト表示されます。

    log.js:2 をクリックすると、DevTools で [ソース] パネルが開きます。

    このメッセージは、ページの JavaScript が console.log('Hello, Console!') を呼び出したときに記録されました。

  3. 次のいずれかのワークフローを使用して、[Console] に戻ります。

    • [Console] タブをクリックします。
    • [Console] にフォーカスが当たるまで、Control+[ キーまたは Command+[ キー（Mac）を押します。
    • コマンド メニューを開き、「Console」と入力して [Show Console Panel] コマンドを選択し、 Enter キーを押します。

  4. デモの [Log Warning] ボタンをクリックします。Abandon Hope All Ye Who Enter がコンソールに記録されます。

    [Log Warning] をクリックした後のコンソール。

    このような形式のメッセージは警告です。

  5. 省略可: [log.js:12] をクリックして、メッセージがこのような形式になった原因となったコードを表示し、完了したら [Console] に戻ります。メッセージが特定の方法で記録された原因となったコードを確認する場合は、いつでもこれを行います。

  6. [Expand] 展開 アイコンを Abandon Hope All Ye Who Enter の前でクリックします。DevTools に、スタック トレースが表示されます。

    スタック トレース。

    スタック トレースは、logWarning という関数が呼び出され、その関数が quoteDante という関数を呼び出したことを示しています。つまり、最初に発生した呼び出しはスタック トレースの一番下にあります。console.trace() を呼び出すと、いつでもスタック トレースを記録できます。

  7. [Log Error] をクリックします。次のエラー メッセージが記録されます: I'm sorry, Dave. I'm afraid I can't do that.

    エラー メッセージ。

  8. [Log Table] をクリックします。有名なアーティストに関する表がコンソールに記録されます。

    コンソールのテーブル。

    birthday 列は 1 行のみ入力されています。コードを確認して、その理由を調べてください。

  9. [Log Group] をクリックします。4 人の有名な犯罪対策の亀の名前が Adolescent Irradiated Espionage Tortoises ラベルの下にグループ化されます。

    コンソールのメッセージのグループ。

  10. [Log Custom] をクリックします。赤い枠線と青い背景のメッセージがコンソールに記録されます。

    コンソールに表示されたカスタム形式のメッセージ。

ここで重要なのは、JavaScript から [Console] にメッセージを記録する場合は、console メソッドのいずれかを使用することです。各メソッドはメッセージの形式が異なります。

このセクションで説明した以外にもメソッドがあります。チュートリアルの最後で、残りのメソッドを調べる方法について説明します。

ブラウザによって記録されたメッセージを表示する

ブラウザもコンソールにメッセージを記録します。通常、これはページに問題がある場合に発生します。

  1. [Cause 404] をクリックします。ページの JavaScript が存在しないファイルを取得しようとしたため、ブラウザは 404 ネットワーク エラーを記録します。

    コンソールに 404 エラーが表示される。

  2. [Cause Error] をクリックします。JavaScript が存在しない DOM ノードを更新しようとしているため、ブラウザはキャッチされない TypeError を記録します。

    コンソールに TypeError が表示される。

  3. [Log Levels] プルダウンをクリックし、[Verbose] オプションが無効になっている場合は有効にします。フィルタの詳細については、次のセクションで説明します。次のメッセージが記録されるようにするには、これを行う必要があります。注: [Default Levels] プルダウンが無効になっている場合は、コンソール サイドバーを閉じる必要がある場合があります。コンソール サイドバーの詳細については、メッセージ ソースでフィルタするをご覧ください。

    詳細ログレベルを有効にする。

  4. [Cause Violation] をクリックします。ページが数秒間応答しなくなり、ブラウザが メッセージ [Violation] 'click' handler took 3000ms をコンソールに記録します。正確な時間は異なる場合があります。

    コンソールでの違反。

メッセージをフィルタする

ページによっては、[Console] にメッセージが大量に表示されることがあります。DevTools には、現在のタスクに関係のないメッセージをフィルタするさまざまな方法が用意されています。

ログレベルでフィルタ

各 console.* メソッドには、Verbose、Info、Warning、Error のいずれかの重大度レベルが割り当てられます。たとえば、console.log() は Info レベルのメッセージですが、console.error() は Error レベルのメッセージです。

ログレベルでフィルタするには:

  1. [Log Levels] プルダウンをクリックし、[Errors] を無効にします。横にチェックマークが表示されなくなると、レベルが無効になります。Error レベルのメッセージが消えます。

    コンソールでエラーレベルのメッセージを無効にする。

  2. [Log Levels] プルダウンをもう一度クリックし、[Errors] を再度有効にします。Error レベルのメッセージが再び表示されます。

テキストでフィルタ

特定の文字列を含むメッセージのみを表示する場合は、[Filter] ボックスにその文字列を入力します。

  1. [Filter] ボックスに「Dave」と入力します。Dave という文字列を含まないメッセージはすべて非表示になります。

    `Dave` を含まないメッセージをフィルタで除外します。

  2. [Filter] ボックスから「Dave」を削除します。すべてのメッセージが再び表示されます。

正規表現でフィルタ

特定の文字列ではなく、テキストのパターンを含むすべてのメッセージを表示する場合は、 正規表現を使用します。

  1. [Filter] ボックスに「/^[AH]/」と入力します。このパターンを RegExr に入力すると、その動作の 説明が表示されます。

    パターン `/^[AH]/` に一致しないメッセージを除外します。

  2. [Filter] ボックスから「/^[AH]/」を削除します。すべてのメッセージが再び表示されます。

メッセージ ソースでフィルタ

特定の URL からのメッセージのみを表示する場合は、[Sidebar] を使用します。

  1. [Show Console Sidebar] コンソール サイドバーを表示します。 をクリックします。

    サイドバー。

  2. [Expand] 展開 アイコンを [12 Messages] の横でクリックします。[Sidebar] に、メッセージが記録された URL のリストが表示されます。たとえば、log.js が原因で 11 件のメッセージが生成されました。

    サイドバーでメールのソースを表示する。

ユーザー メッセージでフィルタ

先ほど [Log Info] をクリックしたときに、スクリプト console.log('Hello, Console!') が呼び出され、メッセージをコンソールに 記録しました。このように JavaScript から記録されたメッセージは、ユーザー メッセージと呼ばれます。 一方、[Cause 404] をクリックすると、リクエストされたリソースが見つからないことを示す Error レベルのメッセージ がブラウザによって記録されます。このようなメッセージはブラウザ メッセージと見なされます。 [サイドバー] を使用すると、ブラウザ メッセージをフィルタして、ユーザー メッセージのみを表示できます。

  1. [9 User Messages] をクリックします。ブラウザ メッセージが非表示になります。

    ブラウザ メッセージのフィルタリング。

  2. [12 Messages] をクリックして、すべてのメッセージを再び表示します。

他のパネルと一緒に [Console] を使用する

スタイルを編集しているときに、[Console] ログをすばやく確認する必要がある場合はどうすればよいでしょうか。ドロワーを使用します。

  1. [Elements] タブをクリックします。

  2. Escape キーを押します。[Drawer] の [Console] タブが開きます。このチュートリアルで使用してきた [Console] のすべての機能が備わっています。

    ドロワーの [**Console**]（コンソール）タブ。

次のステップ

チュートリアルはこれで完了です。[Dispense Trophy] をクリックしてトロフィーを受け取ります。