コンソールの使用

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] パネルとして開きます。

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

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

ドロワーとして開く

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

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

メッセージ スタッキング

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

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

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

コンソール履歴の使用

履歴のクリア

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

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

履歴の保持

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

履歴の保存

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

実行コンテキストの選択

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

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

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

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

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

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

コンソール出力をフィルタするには、[Filter] ボタン（）をクリックします。

重要度や正規表現でフィルタしたり、ネットワーク メッセージを非表示にすることによってフィルタできます。

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

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

その他の設定

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

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