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

Kayce Basques

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

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

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

デモと DevTools を設定する

このチュートリアルは、ユーザーがデモを開いてすべてのワークフローをご自身で試すことができるように設計されています。実際にやってみると、後でワークフローを思い出せる可能性が高くなります。

  1. デモを開きます。

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

    左側がチュートリアル、右側がデモです。

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

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

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

    DevTools をデモの下部に固定します。 DevTools をデモの下部に固定します。

    DevTools が別のウィンドウでホルダーから外され、DevTools が別のウィンドウでホルダーから外されています。

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

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

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

    [ログ情報] をクリックした後のコンソール。

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

    log.js:2 をクリックした後、DevTools で [Sources] パネルが開きます。

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

  3. 次のいずれかのワークフローを使用してコンソールに戻ります。

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

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

    [警告をログに記録] をクリックした後のコンソール。

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

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

  6. Abandon Hope All Ye Who Enter の前にある開くアイコン 展開する。 をクリックします。DevTools に、呼び出しに至るまでのスタック トレースが表示されます。

    スタック トレース。

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

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

    エラー メッセージ。

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

    コンソールのテーブル。

    birthday 列に 1 行しか入力されていないことに注目してください。その理由については、コードを確認してください。

  9. [ロググループ] をクリックします。有名な犯罪戦闘用の 4 匹のカメの名前は Adolescent Irradiated Espionage Tortoises ラベルでグループ化されています。

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

  10. [カスタムを記録] をクリックします。赤色の枠線と青色の背景を持つメッセージがコンソールに記録されます。

    コンソールでカスタム フォーマットを使用したメッセージ。

主な考え方は、JavaScript からコンソールにメッセージを記録する際は、console メソッドの 1 つを使用するということです。メソッドごとにメッセージのフォーマットが異なります。

このセクションで説明したもの以外にも、さまざまなメソッドがあります。チュートリアルの最後に、残りのメソッドを確認する方法を学びます。

ブラウザでログに記録されたメッセージを表示する

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

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

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

  2. [エラーの原因] をクリックします。JavaScript が、存在しない DOM ノードを更新しようとしているため、ブラウザは捕捉されなかった TypeError をログに記録します。

    コンソールの TypeError。

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

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

  4. [違反の原因] をクリックします。ページが数秒間応答しなくなり、ブラウザからコンソールに [Violation] 'click' handler took 3000ms というメッセージが記録されます。正確な期間は異なる場合があります。

    コンソールでの違反。

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

一部のページでは、コンソールに大量のメッセージが表示されることがあります。DevTools には、現在のタスクに関係のないメッセージを除外するさまざまな方法が用意されています。

ログレベルでフィルタ

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

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

  1. [ログレベル] プルダウンをクリックし、[エラー] を無効にします。レベルの横にチェックマークがなくなると、そのレベルは無効になります。Error レベルのメッセージが表示されなくなります。

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

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

テキストでフィルタ

正確な文字列を含むメッセージのみを表示するには、その文字列を [フィルタ] テキスト ボックスに入力します。

  1. [フィルタ] テキスト ボックスに「Dave」と入力します。文字列 Dave を含まないメッセージはすべて非表示になります。Adolescent Irradiated Espionage Tortoises ラベルが表示される場合もあります。それはバグですね。

    `Dave` を含まないメッセージを除外します。

  2. [フィルタ] テキスト ボックスから Dave を削除します。すべてのメールが再表示されます。

正規表現でフィルタする

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

  1. [フィルタ] テキスト ボックスに「/^[AH]/」と入力します。このパターンを RegExr に入力して、処理の説明を表示します。

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

  2. [フィルタ] テキスト ボックスから /^[AH]/ を削除します。すべてのメッセージが再び表示されます。

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

特定の URL から送信されたメッセージのみを表示する場合は、サイドバーを使用します。

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

    サイドバー。

  2. [12 Messages] の横にある [Expand] 展開する。 アイコンをクリックします。[サイドバー] には、メッセージがログに記録された URL のリストが表示されます。たとえば、log.js によって 11 件のメッセージが生成されました。

    サイドバーにメッセージのソースが表示されています。

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

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

  1. [9 User Messages] をクリックします。ブラウザのメッセージは表示されません。

    ブラウザのメッセージを除外します。

  2. [12 メッセージ] をクリックすると、すべてのメールが表示されます。

他のパネルと一緒にコンソールを使用する

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

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

  2. Esc キーを押します。[ドロワー] の [Console] タブが開きます。この API には、このチュートリアルを通じて使用したコンソールのすべての機能が含まれています。

    ドロワーの [**Console**] タブ

次のステップ

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