コンソールの使用

By Kayce Basques

Technical Writer, Chrome DevTools & Lighthouse

By Andi Smith

Andi is a contributor to WebFundamentals

By Meggin Kearney

Meggin is a Tech Writer

By Paul Bakaus

Open Web Developer Advocate at Google • Tools, Performance, Animation, UX

ここでは、DevTools コンソールを開く方法、重複するメッセージをスタックするか個々の行に表示する方法、出力をクリア、保持、またはファイルに保存する方法、出力のフィルタ方法、その他のコンソール設定にアクセスする方法について説明します。

TL;DR

コンソールは、専用のパネルとして開くか、または他のパネルに隣接するドロワーとして開きます。 -重複するメッセージは、スタックするか、個々の行に表示します。
出力は、クリアするか、ページ間で保持するか、ファイルに保存します。
出力は、重大度や正規表現パターンでフィルタしたり、ネットワークメッセージを非表示にすることによってフィルタしたりできます。

コンソールを開く

フルスクリーンの専用パネルとしてアクセスしたコンソール:

[Console] パネル

他のパネルに隣接するドロワーとして開いた場合:

[Console] ドロワー

パネルとして開く

次のいずれかの方法で、専用の [Console] パネルとして開きます。

Ctrl+Shift+J（Windows / Linux）または Cmd+Opt+J（Mac）を押します。
DevTools が既に開いている場合は、[Console] ボタンをクリックします。

[Console] パネルを開くと、[Console] ドロワーは自動的に折りたたまれます。

ドロワーとして開く

次のいずれかの方法で、コンソールを他のパネルに隣接するドロワーとして開きます。

DevTools がフォーカスされている状態で Esc キーを押します。
[Customize and control DevTools] ボタンをクリックしてから [Show console] をクリックします。

Show console

メッセージスタッキング

連続して繰り返されるメッセージの場合は、各インスタンスが新しい行に出力されるのではなく、「スタック」されて左側の余白に数字が表示されます。この数字は、メッセージが繰り返された回数を示します。

メッセージスタッキング

メッセージが記録されるたびに 1 行ずつエントリを表示するには、DevTools の設定で [Show timestamps] をオンにします。

Show timestamps

各メッセージのタイムスタンプが異なるため、各メッセージは個々の行に表示されます。

タイムスタンプが表示されたコンソール

コンソール履歴の使用

履歴のクリア

コンソール履歴は、次のいずれかの方法でクリアできます。

コンソール内を右クリックし、[Clear console] をクリックします。
コンソールで「clear()」と入力します。
JavaScript コード内から console.clear() を呼び出します。
Ctrl+L を押します（Mac、Windows、Linux）。

履歴の保持

ページを更新または変更してもコンソール履歴を保持するには、コンソールの上部にある [Preserve log] チェックボックスをオンにします。コンソールをクリアするかタブを閉じるまでメッセージは保存されます。

履歴の保存

コンソールの出力をログファイルに保存するには、コンソール内で右クリックして [Save as] を選択します。

コンソールを保存してログファイルに保存

実行コンテキストの選択

下記のスクリーンショットで青色にハイライト表示されたドロップダウンメニューは [Execution Context Selector] と呼ばれています。

Execution Context Selector

コンテキストは通常 top（ページの一番上のフレーム）に設定されています。

他のフレームや拡張機能はそれぞれのコンテキストで動作します。こうした他のコンテキストを使用するには、このドロップダウンメニューから選択する必要があります。たとえば、<iframe> 要素のログ出力を見てそのコンテキスト内にある変数を変更する場合は、[Execution Context Selector] ドロップダウンメニューから選択する必要があります。

他のコンテキスト内の要素を調査して DevTools にアクセスしない限り、コンソールはデフォルトで top コンテキストになります。たとえば、ある <iframe> 内で <p> 要素を調査した場合、DevTools では [Execution Context Selector] がその <iframe> のコンテキストに設定されます。

top 以外のコンテキストで作業中は、DevTools では [Execution Context Selector] が下記のスクリーンショットのように赤くハイライト表示されます。これは、デベロッパーが top 以外のコンテキストで作業する必要がほとんどないためです。変数を入力して値を想定していたら、それが undefined（別のコンテキストで定義されているため）という結果になれば、非常に混乱するおそれがあります。

赤くハイライト表示される [Execution Context Selector]

コンソール出力のフィルタリング

コンソール出力をフィルタするには、[Filter] ボタン（） {:.inline}をクリックします。重要度や正規表現でフィルタしたり、ネットワークメッセージを非表示にすることによってフィルタできます。

フィルタされたコンソール出力

重要度によるフィルタリングは以下のとおりです。

オプション & 表示
All	すべてのコンソール出力を表示します。
Errors	console.error() からの出力のみを表示します。
Warnings	console.warn() からの出力のみを表示します。
Info	console.info() からの出力のみを表示します。
Logs	console.log() からの出力のみを表示します。
Debug	console.timeEnd() および console.debug() からの出力のみを表示します。

その他の設定

DevTools の設定を開き、[General] タブに移動して、コンソール設定が見えるように [Console] セクションまでスクロールダウンします。

Console settings

設定 & 説明
Hide network messages	デフォルトでは、コンソールではネットワーク問題が報告されます。これをオンにすると、コンソールにこれらのエラーのログが表示されなくなります。たとえば、404 シリーズや 500 シリーズのエラーはログに記録されません。
Log XMLHttpRequests	各 XMLHttpRequest をコンソールに記録するかどうかを決定します。
Preserve log upon navigation	ページの更新または操作中にコンソール履歴を保持します。
Show timestamps	各コンソールメッセージの前に、呼び出しの日時を示すタイムスタンプが付けられます。特定のイベントがいつ発生したかをデバッグする場合に役立ちます。これをオンにすると、メッセージスタッキングは無効になります。
Enable custom formatters	JavaScript オブジェクトのフォーマットを制御します。

フィードバック

Was this page helpful?

Yes

What was the best thing about this page?

It helped me complete my goal(s)