ここでは、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] ボタン()
{:.inline}をクリックします。
重要度や正規表現でフィルタしたり、ネットワーク メッセージを非表示にすることによってフィルタできます。
重要度によるフィルタリングは以下のとおりです。
オプション & 表示 | |
---|---|
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 オブジェクトの フォーマットを制御します。 |
フィードバック
Was this page helpful?