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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

デモと DevTools を設定する

このチュートリアルでは、デモを開いてすべてのワークフローを自分で試すことができます。実際に操作しながら学習すると、後でワークフローを思い出しやすくなります。

  1. デモを開きます。

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

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

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

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

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

    デモの下部に固定された DevTools: DevTools がデモの下部に固定されています。

    別のウィンドウで DevTools の固定を解除しました。 別のウィンドウで固定を解除した DevTools。

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

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

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

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

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

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

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

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

    • [コンソール] タブをクリックします。
    • コンソールにフォーカスが当たるまで、Ctrl+[ キー（Windows）または Command+[ キー（Mac）を押します。
    • コマンド メニューを開く Console と入力し、[コンソール パネルを表示] コマンドを選択して 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. [Log Custom] をクリックします。赤い枠線と青い背景のメッセージがコンソールに記録されます。

    コンソールでカスタム フォーマットされたメッセージ。

主な考え方は、JavaScript から コンソールにメッセージをログに記録する場合は、console メソッドのいずれかを使用することです。各メソッドはメッセージを異なる形式でフォーマットします。

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

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

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

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

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

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

    コンソールの TypeError。

  3. [ログレベル] プルダウンをクリックし、[詳細] オプションが無効になっている場合は有効にします。フィルタリングについて詳しくは、次のセクションをご覧ください。これは、次にログに記録するメッセージが表示されるようにするためです。注: [デフォルトのレベル] プルダウンが無効になっている場合は、コンソール サイドバーを閉じる必要があります。コンソール サイドバーの詳細については、以下の「メッセージの送信元」でフィルタしてください。

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

  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 件のメッセージ] の横にある展開アイコン 展開 をクリックします。サイドバーには、メッセージがログに記録された URL のリストが表示されます。たとえば、log.js が 11 件のメッセージを生成しました。

    サイドバーでメッセージの送信元を確認する。

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

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

  1. [9 件のユーザー メッセージ] をクリックします。ブラウザのメッセージは非表示になります。

    ブラウザ メッセージを除外する。

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

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

スタイルを編集しているときに、Console ログで何かを確認する必要がある場合はどうすればよいですか？Drawer を使用します。

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

  2. Esc キーを押します。[引き出し] の [コンソール] タブが開きます。このツールには、このチュートリアルで使用してきた コンソールのすべての機能が備わっています。

    ドロワーの [Console] タブ。

次のステップ

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