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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

コンソールを開く

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

コンソール パネルを開く

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

コンソール。

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

コンソール パネルを表示するためのコマンド。

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

Esc キーを押すか、[Customize And Control DevTools] DevTools のカスタマイズとコントロール。 をクリックして、[Show Console Drawer] を選択します。

コンソール ドロワーを表示します。

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

ドロワーの [Console] タブ。

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

ドロワーに [コンソール] タブを表示するためのコマンド。

コンソールの設定を開く

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

コンソール設定

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

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

コンソール サイドバー

メッセージを表示する

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

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

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

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

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

コンソールでは、条件付きブレークポイントとログポイントによって作成されたメッセージにマークが付きます。

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

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

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

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

スタック トレース。

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

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

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

スタック トレース内で「Caused by:」という接頭辞が付いたエラー チェーンが発生します。

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

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

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

非同期スタック トレース。

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

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

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

他 N 個のフレームを表示します。

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

既知のサードパーティ スクリプトを無視リストに自動追加。

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

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

XMLHttpRequest と Fetch リクエストのロギング

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

グループ化解除後の、ログに記録された XMLHttpRequest リクエストとフェッチ リクエストの外観。

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

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

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

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

コンソールに表示される 404 メッセージ。

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

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

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

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

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

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

コンソールに CORS エラーを表示します。

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

[ネットワーク] ボタンと [問題] ボタン。

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

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

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

コンソール サイドバーを開き、[ユーザー メッセージ] をクリックして、ページの 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 に表示されます。

URL フィルタ。

ドメインも使用できます。たとえば、https://example.com/a.js と https://example.com/b.js がメッセージをロギングしている場合、url:https://example.com を使用すると、この 2 つのスクリプトからのメッセージに集中できます。

指定した URL のすべてのメッセージを非表示にするには、「-url:」に続けて URL を入力します（例: https://b.wal.co）。これは除外 URL フィルタです。

除外 URL フィルタ。指定された URL に一致するすべてのメッセージが DevTools で非表示になっています。

1 つの URL からのメッセージも表示できます。そのためには、コンソール サイドバーを開き、[ユーザー メッセージ] セクションを開いて、目的のメッセージを含むスクリプトの URL をクリックします。

特定のスクリプトからのメッセージを表示する。

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

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

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

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

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

/[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] に設定されています。これは、メイン ドキュメントのブラウズ コンテキストを表します。

[JavaScript Context] プルダウン。

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

別の JavaScript コンテキストを選択する。

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

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

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

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

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

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

オブジェクトのプロパティを表示する

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

継承されたプロパティを表示しています。

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

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

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

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

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

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

クラス インスタンスのプライベート プロパティ。

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

私有地のオートコンプリート。

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

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

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

関数を検査する

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

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

関数のプロパティを検査する

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

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

コンソールをクリアする

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

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