出力結果のフィルタリング on Chrome DevTools Console

2 min read読了の目安(約2000字

はじめに

この記事は #EveOneZenn (Everyday One Zenn) vol.01 です。

Chrome DevTools の Console における、出力結果のフィルタリングについてまとめます。

ログレベルでフィルタリング

Console パネル上部のドロップダウンから表示したいログのレベルを指定できます。

ここでは、 VerboseInfoWarningsErrors の4つのログレベルから表示したいログのレベルをそれぞれ指定します。
デフォルトでは Verbose を除く全てのログが表示されます。

ログレベルとログの種類

各ログレベルが指すログの種類は次のとおりです。

Verbose

詳細レベルのログ。

console.debug で出力されたログが対象です。
また、パフォーマンスやセオリーに反するコードを実行した際にブラウザが出力する [Violation] アラートも Verbose に属するログです。

Info

情報レベルのログ。

主に console.warnconsole.error を除くすべてのログが対象です。

Warnings

警告レベルのログ。

console.warn で出力されたログが対象です。

Errors

エラーレベルのログ。

console.error で出力されたログが対象です。

いずれにも属さないログ

下記のメソッドは上記のいずれのログレベルにも属さず、ログレベルでフィルタリングできません。

  • console.clear
  • console.group
  • console.groupCollapsed

console.groupconsole.groupCollapsed は、グループ内で出力されたログはフィルタリングされますが、見出しはフィルタリングされません。

テキストでフィルタリング

Console パネル上部の入力欄から表示したいログに含まれるテキストを指定できます。

また、テキストを /[expression]/ とすることで、正規表現も使用できます。

例) GET:/(GET|POST):/

なお、グルーピングされたログの見出しはテキストにマッチしていなくてもフィルタリングされません。

メッセージソースでフィルタリング

Console パネル上部の をクリックするとログを出力したファイルの一覧が表示されます。
ファイルを選択すると、そのファイルから出力されたログのみを表示できます。

最上段のセクションはすべてのログを、上から2番目のセクションは Console パネルでの操作で出力されたログを、それ以外は各ログレベルに対応したログを出力したファイルを表示します。

同じファイルからのログを追跡したいときに便利です。

参考