Using the Console | Web | Google Developers

Shuma Mizuno
Sep 7, 2018 · 4 min read

学習日: 180907
所要時間: 1時間

選択肢が複数あった場合、ショートカットかキーボードから手を離さずに済むやり方に絞ってまとめた。

コンソールの使用

下記について学ぶ。

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

DevTools コンソール

パネルとして開く
Cmd+Opt+j

ドロワーとして開く
DevTools がフォーカスされている状態で Esc キーを押下。

メッセージ スタッキング

連続して繰り返されるメッセージの場合は、スタックされる。
左側の数字は、メッセージが繰り返された回数を示す。

1行ずつ表示する

DevTools の設定で [Show timestamps] をオン。

コンソール履歴の使用

履歴のクリア
ctrl+L

履歴の保持
コンソールの上部にある [Preserve log] チェックボックスをオン。

履歴の保存
コンソール内で右クリックして [Save as] を選択。

実行コンテキストの選択
Execution Context Selector ドロップダウン メニューで変更。

コンソール出力のフィルタリング
Filterボタンをクリック後、重要度や正規表現を使用。

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

その他の設定

各種設定を確認するために、まず設定画面を表示する。

設定画面の開き方
Cmd+Opt+iでパネルを開き、F1で設定画面を開く。

設定と説明
Hide network messages
デフォルトでは、コンソールではネットワーク問題が報告されます。これをオンにすると、コンソールにこれらのエラーのログが表示されなくなります。たとえば、404 シリーズや 500 シリーズのエラーはログに記録されません。

Log XMLHttpRequests
各 XMLHttpRequest をコンソールに記録するかどうかを決定します。
Preserve log upon navigation ページの更新または操作中にコンソール履歴を保持します。

Show timestamps
各コンソール メッセージの前に、呼び出しの日時を示すタイムスタンプが付けられます。特定のイベントがいつ発生したかをデバッグする場合に役立ちます。これをオンにすると、メッセージ スタッキングは無効になります。

Enable custom formatters JavaScript
オブジェクトの フォーマットを制御します。

質問事項

特になし

所感

面白いメッセージ表示されてた。

JavaScript Consoleに面白い出力をしているサービス
https://qiita.com/oohira/items/6c30bdf3636a134cf119

    Shuma Mizuno

    Written by

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade