このページは、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] をクリックして、[Show Console Drawer] を選択します。
[Console] タブを開いた状態で、DevTools ウィンドウの下部にドロワーがポップアップ表示されます。
[コンソール] タブを開くには、コマンド メニューから「Console
」と入力し、横にドロワー バッジが付いている [コンソールを表示] コマンドを実行します。
コンソール設定を開く
Console の右上にある [Console Settings] をクリックします。
各設定については、以下のリンクをご覧ください。
- ネットワークを非表示
- ログを保持
- 選択したコンテキストのみ
- コンソールで同様のメッセージをグループ化する
- コンソールに CORS エラーを表示する
- ログ XMLHttpRequests
- 積極的評価
- 履歴からのオートコンプリート
コンソールのサイドバーを開く
コンソール サイドバーを表示アイコン をクリックすると、フィルタリングに便利なサイドバーが表示されます。
メッセージを表示する
このセクションでは、コンソールでのメッセージの表示方法を変更する機能を紹介します。実践的なチュートリアルについては、メッセージを表示するをご覧ください。
メッセージのグループ化を無効にする
コンソールの [設定] を開き、[同様のグループ] を無効にして、コンソールのデフォルトのメッセージ グループ動作を無効にします。例については、XHR リクエストとフェッチ リクエストの記録をご覧ください。
ブレークポイントからのメッセージを表示する
コンソールでは、ブレークポイントによってトリガーされたメッセージに以下のようにマークします。
- オレンジ色の疑問符
?
が付いた条件付きブレークポイントでのconsole.*
呼び出し - ピンク色の 2 つのドット
..
を含むログポイント メッセージ
[Sources] パネルのインライン ブレークポイント エディタに移動するには、ブレークポイント メッセージの横にあるアンカーリンクをクリックします。
スタック トレースを表示する
コンソールでは、エラーと警告のスタック トレースが自動的にキャプチャされます。スタック トレースは、エラーまたは警告につながった関数呼び出し(フレーム)の履歴です。コンソールには、フレームが逆の順序で表示されます。最新のフレームが一番上になります。
スタック トレースを表示するには、エラーまたは警告の横にある展開アイコン をクリックします。
非同期スタック トレースを表示する
使用しているフレームワークでサポートされている場合、または setTimeout
などのブラウザ スケジューリング プリミティブを直接使用している場合、DevTools は非同期コードの両方の部分をリンクすることで非同期処理をトレースできます。
この場合、スタック トレースは非同期オペレーションの「全体像」を示しています。
スタック トレースに既知のサードパーティ フレームを表示する
ソースマップに ignoreList
フィールドが含まれている場合、デフォルトでは、コンソールは、バンドラ(webpack など)またはフレームワーク(Angular など)によって生成されたソースからのサードパーティ フレームをスタック トレースから隠します。
サードパーティのフレームを含むフルスタック トレースを表示するには、スタック トレースの下部にある [Show N moreframe] をクリックします。
常にフルスタック トレースを表示するには、 [Settings] > [Ignore List] > [Automatically add same third-party scripts to ignore list] 設定を無効にします。
XHR リクエストとフェッチ リクエストをログに記録する
コンソールの設定を開き、[Log XMLHttpRequests] を有効にして、すべての XMLHttpRequest
リクエストと Fetch
リクエストが発生したときにコンソールに記録します。
上記の例の一番上のメッセージは、コンソールのデフォルトのグループ化動作を示しています。以下の例は、メッセージのグループ化を無効化した後の同じログを示しています。
ページの読み込み後もメッセージを維持する
デフォルトでは、新しいページが読み込まれるたびにコンソールがクリアされます。ページが読み込まれた後もメッセージを保持するには、コンソール設定を開くで、[ログを保持] チェックボックスをオンにします。
ネットワーク メッセージを非表示にする
デフォルトでは、ブラウザはネットワーク メッセージをコンソールに記録します。たとえば、次の例の一番上のメッセージは 404 を表しています。
ネットワーク メッセージを非表示にするには:
- Google Play Console の [設定] を開きます。
- [ネットワークを非表示] チェックボックスをオンにします。
CORS エラーを表示または非表示にする
クロスオリジン リソース シェアリング(CORS)が原因でネットワーク リクエストが失敗した場合、コンソールに CORS エラーが表示されます。
CORS エラーを表示または非表示にするには:
- Google Play Console の [設定] を開きます。
- [コンソールに CORS エラーを表示する] チェックボックスをオンまたはオフにします。
コンソールが CORS エラーを表示するように設定されていて、エラーが発生した場合は、エラーの横にある次のボタンをクリックします。
- : [ネットワーク] パネルで 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 からのメッセージを表示するには、コンソール サイドバーを開き、[User Messages] セクションを開いて、確認したいメッセージを含むスクリプトの URL をクリックします。
コンテキストが異なるメールを除外する
たとえば、ページに広告を配置しているとします。広告が <iframe>
に埋め込まれ、コンソールに多数のメッセージが生成されています。この広告は JavaScript コンテキストが異なるため、メッセージを非表示にする 1 つの方法は、コンソール設定を開き、[選択したコンテキストのみ] チェックボックスをオンにすることです。
正規表現のパターンに一致しないメールを除外する
[フィルタ] テキスト ボックスに /[foo]\s[bar]/
などの正規表現を入力して、そのパターンに一致しないメッセージを除外します。スペースはサポートされていません。代わりに \s
を使用してください。DevTools は、メッセージ テキストまたはメッセージをログに記録する原因となったスクリプトにパターンが見つかったかどうかを確認します。
たとえば次のコマンドでは、/[gm][ta][mi]/
に一致しないすべてのメッセージがフィルタされます。
ログ内のテキストを検索する
ログメッセージ内のテキストを検索するには:
- 組み込みの検索バーを開くには、Command+F キー(Mac)または Ctrl+F キー(Windows、Linux)を押します。
- バーにクエリを入力します。この例のクエリは
legacy
です。 必要に応じて、次のことができます。- [ Match Case] をクリックして、クエリで大文字と小文字が区別されるようにします。
- [ 正規表現を使用] をクリックすると、正規表現を使用して検索できます。
- 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 に設定されています。
ページの <iframe>
に埋め込まれた広告があるとします。広告の DOM を微調整するために JavaScript を実行したい場合、それには、まず [JavaScript Context] プルダウンから広告の閲覧コンテキストを選択する必要があります。
オブジェクトのプロパティを検査する
コンソールでは、指定した JavaScript オブジェクトのプロパティのインタラクティブなリストを表示できます。
リストを参照するには、コンソールにオブジェクト名を入力して、Enter キーを押します。
DOM オブジェクトのプロパティを調べるには、DOM オブジェクトのプロパティを表示するの手順をご覧ください。
独自のプロパティと継承されたプロパティを特定する
コンソールでは、オブジェクト プロパティが最初に並べ替えられ、太字フォントでハイライト表示されます。
プロトタイプ チェーンから継承されるプロパティは通常のフォントです。コンソールでは、組み込みオブジェクトの対応するネイティブ アクセサを評価して、オブジェクト自体上でそれらを表示します。
カスタム アクセサを評価する
デフォルトでは、作成したアクセサは DevTools で評価されません。
オブジェクトのカスタム アクセサーを評価するには、(...)
をクリックします。
列挙可能なプロパティと列挙不可能なプロパティを見つける
列挙型のプロパティは明るい色で表示します。列挙できないプロパティはミュートされます。
列挙可能なプロパティは、for … in
ループまたは Object.keys()
メソッドで反復処理できます。
クラス インスタンスのプライベート プロパティを見つける
コンソールは、接頭辞 #
を付けて、クラス インスタンスのプライベート プロパティを指定します。
また、クラススコープの外部で非公開プロパティを評価する場合でも、コンソールでは非公開プロパティをオートコンプリートできます。
内部 JavaScript プロパティを検査する
コンソールでは、ECMAScript 表記を使用しているため、JavaScript の内部プロパティの一部が二重角かっこで囲まれています。コード内でこのようなプロパティを操作することはできません。ただし、検査すると役に立つ場合があります。
オブジェクトごとに、次の内部プロパティが表示される場合があります。
- どのオブジェクトにも
[[Prototype]]
があります。 - プリミティブ ラッパーには
[[PrimitiveValue]]
プロパティがあります。 ArrayBuffer
オブジェクトには次のプロパティがあります。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 キーを押します。