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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

コンソールを開く

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

コンソール パネルを開く

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

コンソール。

コマンド メニューからコンソールを開くには、Console の入力を開始し、横にパネルバッジが付いている [コンソールを表示] コマンドを実行します。

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

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

Esc キーを押すか、DevTools のカスタマイズと制御アイコン Customize And Controls DevTools。 をクリックして [コンソール ドロワーを表示] を選択します。

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

[DevTools] ウィンドウの下部にドロワーがポップアップし、[コンソール] タブが開きます。

Drawer の [Console] タブ。

コマンド メニューから [コンソール] タブを開くには、Console の入力を開始し、横に Drawer バッジが付いている Show Console コマンドを実行します。

Drawer で [Console] タブを表示するコマンド。

コンソールの設定を開く

コンソールの右上にある 設定] をタップします。 [コンソール設定] をクリックします。

[Console Settings] を選択します。

以下のリンクで、各設定について説明しています。

[コンソール サイドバーを表示] コンソール サイドバーを表示します。 をクリックしてサイドバーを表示します。サイドバーはフィルタリングに便利です。

コンソール サイドバー。

メッセージを表示する

このセクションには、コンソールでのメッセージの表示方法を変更する機能が含まれています。実践的なチュートリアルについては、メッセージを表示するをご覧ください。

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

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

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

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

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

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

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

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

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

スタック トレース。

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

コンソールには、スタック トレースにエラーの原因のチェーンが表示されることがあります。

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

スタック トレース内の「Caused by:」で始まるエラー原因のチェーン。

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

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

この場合、スタック トレースには非同期オペレーションの「全体像」が表示されます。

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

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

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

サードパーティのフレームを含む完全なスタック トレースを表示するには、スタック トレースの下部にある [N 個のフレームをさらに表示] をクリックします。

さらに N 個のフレームを表示します。

常に完全なスタック トレースを表示するには、設定] をタップします。 [設定] > [無視リスト] > [既知の第三者のスクリプトを無視リストに自動追加] の設定を無効にします。

既知の第三者のスクリプトを無視リストに自動的に追加します。

XHR リクエストと Fetch リクエストをログに記録する

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

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

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

グループ解除後の XMLHttpRequest リクエストと Fetch リクエストのログの表示。

ページ読み込み間でメッセージを保持する

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

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

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

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

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

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

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

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

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

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

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

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

[Network] ボタンと [Issues] ボタン。

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

コンソールでメッセージをフィルタする方法はたくさんあります。

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

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

ユーザー メッセージの表示。

ログレベルでフィルタ

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

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

  • Verbose
  • Info
  • Warning
  • Error

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

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

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

[Log Levels]（ログレベル）プルダウン。

コンソール サイドバーを表示します。 コンソール サイドバーを開き、[エラー]、[警告]、[情報]、[詳細] のいずれかをクリックして、ログレベルでフィルタすることもできます。

サイドバーを使用して警告を表示する。

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 フィルタ。DevTools は、指定された URL に一致するすべてのメッセージを非表示にしています。

また、コンソール サイドバーを開き、[ユーザー メッセージ] セクションを開いて、注目したいメッセージを含むスクリプトの URL をクリックすると、単一の URL からのメッセージを表示することもできます。

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

さまざまなコンテキストのメッセージをフィルタする

ページに広告が表示されているとします。広告が <iframe> に埋め込まれており、コンソールに大量のメッセージが生成されています。この広告は別の JavaScript コンテキストにあるため、メッセージを非表示にするには、コンソール設定を開き、[選択したコンテキストのみ] チェックボックスをオンにします。

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

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

たとえば、次のフィルタは /[gm][ta][mi]/ と一致しないすべてのメッセージを除外します。

/[gm][ta][mi]/ に一致しないメッセージをフィルタで除外します。

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

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

JavaScript を実行

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

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

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

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

コピー オプション。

以前の式を再実行して履歴を消去する

上矢印キーを押すと、以前に コンソールで実行した JavaScript 式の履歴を切り替えることができます。Enter キーを押して、その式をもう一度実行します。

コンソール履歴を消去するには、[コンソール] の空白スペースを右クリックし、コンテキスト メニューから [コンソール履歴を消去] を選択します。

メッセージのクリア、コピー、展開、折りたたみ、保存

[コンソール] ウィンドウをクリアするには、次のいずれかの操作を行います。

  • 上部のアクションバーで [ブロック] [コンソールをクリア] をクリックします。
  • Ctrl+L キーまたは Cmd+K キーを押します。
  • [コンソール] の空白スペースを右クリックし、コンテキスト メニューから [コンソールをクリア] を選択します。

すべてのメッセージを展開または折りたたむには、上部のアクション バーにある [] [すべて展開] または [] [すべて折りたたむ] をクリックします。

右クリックのコンテキスト メニュー。

コンテキスト メニューでは、次の操作も行えます。

  • [Copy console]: 現在のすべてのメッセージをクリップボードにコピーします。以前のコマンドの履歴はコピーされません。
  • 名前を付けて保存...: 現在のすべてのメッセージをプレーン テキストの .log ファイルに保存します。

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

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

Eager Evaluation を無効にする

コンソールに JavaScript 式を入力すると、事前評価によってその式の戻り値のプレビューが表示されます。コンソールの設定を開き、[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 オブジェクトのプロパティを表示するの手順に沿って操作します。

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

コンソールでは、独自のオブジェクト プロパティが最初に並べ替えられ、太字でハイライト表示されます。

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

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

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

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

デフォルトでは、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]]。値を受け取るオブジェクト。 イテレータ オブジェクト。

コンソールをクリアする

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

  • [Clear Console]（コンソールをクリア） 消去] をタップします。 をクリックします。
  • メッセージを右クリックして、[コンソールをクリア] を選択します。
  • コンソールに「clear()」と入力して、Enter キーを押します。
  • ウェブページの JavaScript から console.clear() を呼び出します。
  • コンソールが目的のコンテンツとして表示されている状態で Ctrl+L キーを押します。