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

Kayce Basques 氏
Kayce Basques
Twitter GitHub Glitch
ソフィア・エメリアノバ
Sofia Emelianova
GitHub

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

console.log() などの関数の API リファレンスについては、Console API リファレンスをご覧ください。monitorEvents() などの関数のリファレンスについては、Console Utilities 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] をクリックします。

Console の設定。

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

コンソール サイドバーを表示アイコン コンソールのサイドバーを表示します。 をクリックすると、フィルタリングに便利なサイドバーが表示されます。

コンソールのサイドバー

メッセージを表示する

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

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

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

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

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

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

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

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

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

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

スタック トレース。

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

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

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

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

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

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

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

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

常にフルスタック トレースを表示するには、設定] の順にタップします。 [Settings] > [Ignore List] > [Automatically add same third-party scripts to ignore list] 設定を無効にします。

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

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

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

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

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

ログに記録された XMLHttpRequest リクエストと Fetch リクエストのグループ化解除後の状態。

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

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

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

デフォルトでは、ブラウザはネットワーク メッセージをコンソールに記録します。たとえば、次の例の一番上のメッセージは 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 からのメッセージを表示するには、コンソール サイドバーを開き、[User Messages] セクションを開いて、確認したいメッセージを含むスクリプトの 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 回入力してからコンソールの上部に固定できます。式の値はほぼリアルタイムで更新されます。Live Expressions で JavaScript 式値をリアルタイムで表示するをご覧ください。

積極的評価を無効にする

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

評価によるユーザー アクティベーションのトリガー

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

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

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

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

履歴の式を表示するオートコンプリートのポップアップ。

コンソールの [設定] を開き、[履歴からのオートコンプリート] チェックボックスをオフにして、履歴からの式の表示を停止します。

JavaScript コンテキストを選択

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

JavaScript コンテキストのプルダウン。

ページの <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 キーを押します。