コンソール機能リファレンス

このページでは、Chrome DevTools コンソールに関連する機能のリファレンスを紹介します。コンソールを使用してログに記録されたメッセージを表示し、JavaScript を実行することに精通していることを前提としています。そうでない場合は、スタートガイドをご覧ください。

console.log() などの関数の API リファレンスについては、Console API リファレンスをご覧ください。monitorEvents() などの関数のリファレンスについては、コンソール ユーティリティ API リファレンスをご覧ください。

コンソールを開く

コンソールは、パネルまたはドロワーのタブとして開くことができます。

コンソール パネルを開く

Ctrl+Shift+J キーまたは command+option+J キー（Mac）を押します。

コマンド メニューからコンソールを開くには、まず「Console」と入力し、横にパネルバッジがある [コンソールを表示] コマンドを実行します。

ドロワーにコンソールを開く

Esc キーを押すか、[Customize And Control DevTools] をクリックして、[Show Console Drawer] を選択します。

[Console] タブを開いた状態で、DevTools ウィンドウの下部にドロワーがポップアップ表示されます。

コマンド メニューから [コンソール] タブを開くには、まず「Console」と入力し、横にドロワー バッジが付いている [コンソールを表示] コマンドを実行します。

コンソールの設定を開く

[Console] の右上にある [Console Settings] をクリックします。

各設定については、以下のリンクをご覧ください。

• ネットワークを非表示
• ログを保持
• 選択したコンテキストのみ
• コンソールで同様のメッセージをグループ化する
• コンソールに CORS エラーを表示する
• XMLHttpRequests をロギングする
• 積極的な評価
• 履歴からのオートコンプリート

コンソール サイドバーを開く

コンソール サイドバーを表示アイコン をクリックすると、フィルタ処理に役立つサイドバーが表示されます。

メッセージを表示する

このセクションでは、コンソールでのメッセージの表示方法を変更する機能について説明します。ハンズオン チュートリアルについては、メッセージを表示するをご覧ください。

メッセージのグループ化を無効にする

コンソールの [設定] を開き、[類似するグループ] を無効にして、コンソールのデフォルトのメッセージ グループ化動作を無効にします。例については、XHR と取得リクエストをログに記録するをご覧ください。

ブレークポイントからのメッセージを表示する

コンソールは、ブレークポイントによってトリガーされたメッセージに次のようにマークを付けます。

• 条件付きブレークポイントで console.* が呼び出され、オレンジ色の疑問符 ? が付いている場合
• ピンク色の 2 つのドット .. が付いたログポイント メッセージ

[Sources] パネルのインライン ブレークポイント エディタに移動するには、ブレークポイント メッセージの横にあるアンカーリンクをクリックします。

スタック トレースを表示する

コンソールでは、エラーと警告のスタック トレースが自動的にキャプチャされます。スタック トレースは、エラーまたは警告の原因となった関数呼び出し（フレーム）の履歴です。コンソールには、フレームが逆の順序で表示されます。つまり、最新のフレームが一番上になります。

スタック トレースを表示するには、エラーまたは警告の横にある 展開アイコンをクリックします。

スタック トレースでエラーの原因を表示する

コンソールでは、スタック トレース内のエラー原因のチェーンを確認できます（存在する場合）。

デバッグを容易にするために、エラーをキャッチして再スローするときにエラーの原因を指定できます。コンソールが原因チェーンをたどると、Caused by: 接頭辞が付いた各エラースタックが出力されるため、元のエラーを見つけることができます。

非同期スタック トレースを表示する

使用しているフレームワークでサポートされている場合、または setTimeout などのブラウザ スケジューリング プリミティブを直接使用している場合、DevTools は非同期コードの両方の部分をリンクすることで、非同期処理をトレースできます。

この場合、スタック トレースは非同期オペレーションの「全体像」を示しています。

スタック トレースに既知のサードパーティ フレームを表示する

ソースマップに ignoreList フィールドが含まれている場合、デフォルトでは、コンソールはバンドラ（webpack など）やフレームワーク（Angular など）によって生成されたソースからのサードパーティ フレームをスタック トレースから除外します。

サードパーティ フレームを含むフルスタック トレースを表示するには、スタック トレースの下部にある [Show N links moreframe] をクリックします。

フルスタック トレースを常に表示するには、 [設定] > [無視リスト] > [既知のサードパーティ スクリプトを無視リストに自動追加] の設定を無効にします。

XHR リクエストとフェッチ リクエストをログに記録する

コンソール設定を開き、[Log XMLHttpRequests] を有効にして、すべての XMLHttpRequest リクエストと Fetch リクエストが発生したときにコンソールに記録します。

上記の例の一番上のメッセージは、コンソールのデフォルトのグループ化動作を示しています。以下の例は、メッセージのグループ化を無効にした後の同じログを示しています。

ページの読み込み後もメッセージを維持する

デフォルトでは、新しいページが読み込まれるたびにコンソールがクリアされます。ページの読み込み後もメッセージを保持するには、[コンソール設定] を開き、[ログを保持] チェックボックスをオンにします。

ネットワーク メッセージを非表示にする

デフォルトでは、ブラウザはネットワーク メッセージをコンソールに記録します。たとえば、次の例の一番上のメッセージは 404 を表します。

ネットワーク メッセージを非表示にするには:

1. Google Play Console の [設定] を開きます。
2. [ネットワークを非表示] チェックボックスをオンにします。

CORS エラーの表示と非表示を切り替える

クロスオリジン リソース シェアリング（CORS）が原因でネットワーク リクエストが失敗した場合、コンソールに CORS エラーが表示されます。

CORS エラーの表示と非表示を切り替えるには:

1. Google Play Console の [設定] を開きます。
2. [コンソールに CORS エラーを表示する] チェックボックスをオンまたはオフにします。

コンソールが CORS エラーを表示するように設定されていて、エラーが発生した場合は、エラーの横にある次のボタンをクリックできます。

• : [Network] パネルで CORS 関連の TypeError を使用してリクエストを開きます。
• : [問題] タブで考えられる解決策を確認します。

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

コンソールでメッセージを除外する方法は多数あります。

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

コンソール サイドバーを開き、[ユーザー メッセージ] をクリックして、ページの JavaScript から送信されたメッセージのみを表示します。

ログレベルでフィルタ

DevTools では、console.* のほとんどのメソッドの重大度レベルが割り当てられます。

次の 4 つのレベルがあります。

• Verbose
• Info
• Warning
• Error

たとえば、console.log() は Info グループにありますが、console.error() は Error グループにあります。Console API リファレンスでは、該当する各メソッドの重大度レベルについて説明しています。

ブラウザがコンソールに記録するすべてのメッセージにも重大度があります。必要のないメッセージは非表示にできます。たとえば、Error メッセージのみに関心がある場合は、他の 3 つのグループを非表示にできます。

[ログレベル] プルダウンをクリックして、Verbose、Info、Warning、Error メッセージを有効または無効にします。

コンソール サイドバーを開くと、[Errors]、[Warnings]、[Info]、[Verbose] のいずれかをクリックして、ログレベルでフィルタすることもできます。

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 をクリックします。

異なるコンテキストのメールを除外する

ページ上に広告が表示されているとします。広告が <iframe> に埋め込まれ、コンソールに多くのメッセージを生成している。この広告は JavaScript コンテキストが異なるため、メッセージを非表示にする 1 つの方法は、コンソール設定を開き、[選択したコンテキストのみ] チェックボックスをオンにすることです。

正規表現パターンに一致しないメールを除外する

[フィルタ] テキスト ボックスに /[foo]\s[bar]/ などの正規表現を入力して、そのパターンに一致しないメッセージを除外します。スペースはサポートされていません。代わりに \s を使用してください。DevTools は、メッセージ テキストまたはメッセージをログに記録する原因となったスクリプトにパターンが含まれているかどうかを確認します。

たとえば、次のクエリでは、/[gm][ta][mi]/ に一致しないすべてのメッセージが除外されます。

ログ内のテキストを検索する

ログメッセージ内のテキストを検索するには:

1. 組み込みの検索バーを開くには、Command+F キー（Mac）または Ctrl+F キー（Windows、Linux）を押します。
2. バーにクエリを入力します。この例のクエリは legacy です。 必要に応じて、次のことができます。
   • [ Match Case] をクリックして、クエリで大文字と小文字を区別します。
   • 正規表現を使用して検索するには、 [正規表現を使用] をクリックします。
3. Enter キーを押します。前または次の検索結果に移動するには、上ボタンまたは下ボタンを押します。

JavaScript を実行

このセクションでは、コンソールでの JavaScript の実行に関連する機能について説明します。実践的なチュートリアルについては、JavaScript の実行をご覧ください。

文字列のコピーのオプション

デフォルトでは、コンソールは有効な JavaScript リテラルとして文字列を出力します。出力を右クリックして、次の 3 つのコピー オプションのいずれかを選択します。

• JavaScript リテラルとしてコピーする。適切な特殊文字をエスケープし、コンテンツに応じて文字列を一重引用符、二重引用符、またはバッククォートで囲みます。
• 文字列の内容をコピーする。改行やその他の特殊文字を含む生の文字列をそのままクリップボードにコピーします。
• JSON リテラルとしてコピーする。文字列を有効な JSON にフォーマットします。

履歴から式を再実行する

上矢印キーを押して、以前にコンソールで実行した JavaScript 式の履歴を順番に表示できます。Enter キーを押して、その式を再度実行します。

ライブ式を使用して式の値をリアルタイムで確認する

コンソールで同じ JavaScript 式を繰り返し入力する場合は、Live Expression を作成する方が簡単な場合があります。Live Expressions では、式を 1 回入力してコンソール上部に固定できます。式の値はほぼリアルタイムで更新されます。ライブ式を使用して JavaScript 式の値をリアルタイムで監視するをご覧ください。

積極的な評価を無効にする

コンソールで JavaScript 式を入力すると、その式の戻り値のプレビューが [Eager Evaluation] に表示されます。コンソール設定を開き、[Eager Evaluation] チェックボックスをオフにして、戻り値のプレビューをオフにします。

評価でユーザー アクティベーションをトリガーする

ユーザーの有効化とは、ユーザーの操作に依存するブラウジング セッションの状態を指します。「アクティブ」状態は、ユーザーが現在ページを操作しているか、ページの読み込み後に操作を行ったことを意味します。

評価でユーザー アクティベーションをトリガーするには、コンソールの設定を開き、[ ユーザー アクティベーションのトリガーを評価する] チェックボックスをオンにします。

履歴からのオートコンプリートを無効にする

式を入力すると、コンソールのオートコンプリート ポップアップに、以前に実行した式が表示されます。これらの式の先頭には > 文字が付加されます。次の例では、DevTools は以前に document.querySelector('a') と document.querySelector('img') を評価しました。

コンソール設定を開き、[履歴からのオートコンプリート] チェックボックスを無効にして、履歴の式が表示されないようにします。

JavaScript コンテキストを選択

デフォルトでは、[JavaScript Context] プルダウンは [top] に設定されています。これは、メイン ドキュメントのブラウズ コンテキストを表します。

たとえば、ページに <iframe> を埋め込んだ広告があるとします。広告の DOM を微調整するには JavaScript を実行します。そのためには、まず [JavaScript Context] プルダウンから広告のブラウジング コンテキストを選択する必要があります。

オブジェクトのプロパティを検査する

コンソールでは、指定した JavaScript オブジェクトのプロパティのインタラクティブなリストを表示できます。

リストを参照するには、コンソールにオブジェクト名を入力し、Enter キーを押します。

DOM オブジェクトのプロパティを調べるには、DOM オブジェクトのプロパティを表示するの手順をご覧ください。

独自のプロパティと継承されたプロパティを特定する

Console では、まず自身のオブジェクト プロパティが並べ替えられ、太字フォントでハイライト表示されます。

プロトタイプ チェーンから継承されたプロパティは通常のフォントです。コンソールは、組み込みオブジェクトの対応するネイティブ アクセサーを評価することで、オブジェクトをオブジェクト上に表示します。

カスタム アクセサーを評価する

デフォルトでは、作成したアクセサは DevTools で評価されません。 オブジェクトのカスタム アクセサーを評価するには、(...) をクリックします。

列挙可能なプロパティと列挙できないプロパティを特定する

列挙型のプロパティは明るい色です。列挙できないプロパティはミュートされます。 列挙型プロパティは、for … in ループまたは Object.keys() メソッドで反復処理できます。

クラス インスタンスのプライベート プロパティを検出する

コンソールは、クラス インスタンスのプライベート プロパティを接頭辞 # で示します。

コンソールでは、クラススコープ外でプライベート プロパティを評価する場合でも、プライベート プロパティをオートコンプリートできます。

内部 JavaScript プロパティを検査する

コンソールでは、ECMAScript 表記を使用し、JavaScript 内部のプロパティの一部は二重の角かっこで囲んでいます。このようなプロパティをコード内で操作することはできません。ただし、それらを調べると役に立つ場合があります。

さまざまなオブジェクトで、次の内部プロパティが表示される場合があります。

• すべてのオブジェクトに [[Prototype]] があります。
• プリミティブ ラッパーには [[PrimitiveValue]] プロパティがあります。
• ArrayBuffer オブジェクトには次のプロパティがあります。
  • [[Int8Array]]、[[Uint8Array]]、[[Int16Array]]、[[Int32Array]]
  • [[ArrayBufferByteLength]]、[[ArrayBufferData]]
• ArrayBuffer 固有のプロパティに加えて、WebAssembly.Memory オブジェクトには [[WebAssemblyMemory]] プロパティがあります。
• キー付きコレクション（マップとセット）には、キー付きエントリを含む [[Entries]] プロパティがあります。
• Promise オブジェクトには次のプロパティがあります。
  • [[PromiseState]]: 保留中、フルフィルメント、または不承認
  • [[PromiseResult]]: 保留中の場合は undefined、処理済みの場合は <value>、拒否された場合は <reason>、
• Proxy オブジェクトには、[[Handler]] オブジェクト、[[Target]] オブジェクト、[[isRevoked]]（スイッチオフ / オフ）のプロパティがあります。

関数を検査する

JavaScript では、関数はプロパティを持つオブジェクトでもあります。ただし、コンソールに関数名を入力すると、DevTools ではプロパティを表示する代わりに、関数名が呼び出されます。

JavaScript 内部の関数プロパティを表示するには、console.dir() コマンドを使用します。

関数には次のプロパティがあります。

• [[FunctionLocation]]。ソースファイル内の関数定義を含む行へのリンク。
• [[Scopes]]。関数がアクセスできる値と式を一覧表示します。デバッグ中に関数のスコープを調べるには、ローカル プロパティ、クロージャ プロパティ、グローバル プロパティを表示、編集するをご覧ください。
• バインドされた関数には次のプロパティがあります。
  • [[TargetFunction]]。bind() のターゲット。
  • [[BoundThis]]。this の値。
  • [[BoundArgs]]。関数引数の配列。
• ジェネレータ関数は、[[IsGenerator]]: true プロパティでマークされます。
• ジェネレータはイテレータ オブジェクトを返します。このオブジェクトには次のプロパティがあります。
  • [[GeneratorLocation]]。ソースファイル内のジェネレータ定義を含む行へのリンク。
  • [[GeneratorState]]: suspended、closed、または running.
  • [[GeneratorFunction]]。オブジェクトを返したジェネレータ。
  • [[GeneratorReceiver]]。値を受け取るオブジェクト。

コンソールをクリアする

コンソールをクリアするには、次のいずれかのワークフローを使用します。

• [コンソールを消去] をクリックします。
• メッセージを右クリックし、[Clear Console] を選択します。
• コンソールに「clear()」と入力して、Enter キーを押します。
• ウェブページの JavaScript から console.clear() を呼び出します。
• コンソールにフォーカスがある状態で Ctrl+L キーを押します。