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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

コンソールを開く

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

コンソール パネルを開く

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

コンソール。

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

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

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

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

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

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

ドロワーの [コンソール] タブ。

[Command Menu] から [Console] タブを開くには、Console の入力を開始し、ドロワー バッジの横にある [Show Console] コマンドを実行します。

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

コンソールの設定を開く

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

コンソールの設定。

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

[コンソール サイドバーを表示] コンソール サイドバーを表示します。 をクリックしてサイドバーを表示します。これはフィルタリングに役立ちます。

コンソールのサイドバー。

メッセージを表示する

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

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

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

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

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

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

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

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

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

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

スタック トレース

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

コンソールでは、スタック トレース内にエラーの原因のチェーンが表示されます（存在する場合）。

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

スタック トレースには、エラーの原因の連鎖に「Caused by:」という接頭辞が付いています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

グループ化を解除した後の、ログに記録された XMLHttpRequest リクエストと Fetch リクエストの表示内容。

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

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

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

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

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

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

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

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

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

CORS エラーを表示または非表示にするには:

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

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

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

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

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

コンソールでメッセージを除外する方法はいくつかあります。

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

コンソール サイドバーを開くと [ユーザー メッセージ] が表示されます。このボタンをクリックすると、ページの JavaScript から送信されたメッセージのみが表示されます。

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

ログレベルでフィルタ

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

レベルは次の 4 つです。

  • Verbose
  • Info
  • Warning
  • Error

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

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

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

[ログレベル] プルダウン。

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

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

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 に一致するすべてのメッセージを非表示にしています。

1 つの 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 です。クエリの入力。 必要に応じて、次の操作を行うこともできます。
    • 大文字と小文字を区別する。 [大文字と小文字を区別] をクリックして、クエリで大文字と小文字を区別します。
    • [[正規表現] ボタン。 正規表現を使用] をクリックして、正規表現で検索します。
  3. Enter キーを押します。前または次の検索結果に移動するには、上ボタンまたは下ボタンを押します。

JavaScript を実行

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

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

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

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

コピー オプション。

履歴から式を再実行する

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

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

コンソールで同じ JavaScript 式を繰り返し入力している場合は、Live Expression を作成すると簡単に作成できます。ライブ式を使用すると、式を 1 回入力して、Console の上部に固定できます。式の値はほぼリアルタイムで更新されます。ライブ式を使用して 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 コンテキストを選択する。

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

Console では、指定した 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 キーを押します。