Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

コンソールの使用

ここでは、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] ボタン（[Filter] ボタン）をクリックします。

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

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

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

オプション & 表示
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 オブジェクトの フォーマットを制御します。