出力結果のフィルタリング on Chrome DevTools Console
はじめに
この記事は #EveOneZenn (Everyday One Zenn) vol.01 です。
Chrome DevTools の Console における、出力結果のフィルタリングについてまとめます。
ログレベルでフィルタリング
Console パネル上部のドロップダウンから表示したいログのレベルを指定できます。
ここでは、 Verbose、Info、Warnings、Errors の４つのログレベルから表示したいログのレベルをそれぞれ指定します。
デフォルトでは Verbose を除く全てのログが表示されます。
ログレベルとログの種類
各ログレベルが指すログの種類は次のとおりです。
Verbose
詳細レベルのログ。
console.debug で出力されたログが対象です。
また、パフォーマンスやセオリーに反するコードを実行した際にブラウザが出力する [Violation] アラートも Verbose に属するログです。
Info
情報レベルのログ。
主に console.warn と console.error を除くすべてのログが対象です。
Warnings
警告レベルのログ。
console.warn で出力されたログが対象です。
Errors
エラーレベルのログ。
console.error で出力されたログが対象です。
いずれにも属さないログ
下記のメソッドは上記のいずれのログレベルにも属さず、ログレベルでフィルタリングできません。
console.clearconsole.groupconsole.groupCollapsed
console.group と console.groupCollapsed は、グループ内で出力されたログはフィルタリングされますが、見出しはフィルタリングされません。
テキストでフィルタリング
Console パネル上部の入力欄から表示したいログに含まれるテキストを指定できます。
また、テキストを /[expression]/ とすることで、正規表現も使用できます。
例） GET:、/(GET|POST):/
なお、グルーピングされたログの見出しはテキストにマッチしていなくてもフィルタリングされません。
メッセージソースでフィルタリング
Console パネル上部の をクリックするとログを出力したファイルの一覧が表示されます。
ファイルを選択すると、そのファイルから出力されたログのみを表示できます。
最上段のセクションはすべてのログを、上から２番目のセクションは Console パネルでの操作で出力されたログを、それ以外は各ログレベルに対応したログを出力したファイルを表示します。
同じファイルからのログを追跡したいときに便利です。
Discussion