コンソール メッセージのフィルター処理

DevTools コンソール のフィルター オプションを使用して、コンソールの過剰なログ メッセージからのノイズを減らし、探しているログ メッセージの種類をより適切に確認します。

さまざまな Web ページにアクセスすると、 コンソール にあらゆる種類の情報があふれ出している場合があります。 多くの場合、別の開発者がログに記録したページに関する情報など、情報はユーザーには関係ありません。 または、現在のサイトのパフォーマンスに関する違反や警告に関するログに記録された情報が表示され、変更できない場合があります。

コンソール ログ メッセージは、さまざまな方法でフィルター処理できます。

• ログ レベルでフィルター処理します。
• テキストでフィルター処理します。
• 正規表現でフィルター処理します。
• メッセージ ソースでフィルター処理します。

ログ レベルでフィルター処理する

オブジェクトの console 各メソッドには、重大度レベルがアタッチされています。 重大度レベルは、Verbose、、InfoWarning、または Errorです。 API ドキュメントに重大度レベルを表示します。 たとえば、 console.log() は -level メッセージですがconsole.error()、-level メッセージですErrorInfo。

コンソールでメッセージをフィルター処理するには、[ログ レベル] ドロップダウン メニューを使用します。 各レベルの状態を切り替えることができます。 各レベルをオフにするには、それぞれの横にあるチェックマークを削除します。

フィルターが適用されていないので、次の図は数十のメッセージを表示します。 次に、メッセージの数を減らして管理します。

ノイズを減らすすべての警告レベルのメッセージを非表示にするには、[ ログ レベル ] ドロップダウン リストをクリックし、レベルを Warnings クリアします。

テキストでフィルター処理する

詳細を表示するには、テキストを使用してメッセージをフィルター処理するには、[ フィルター ] テキスト ボックスに文字列を入力します。 たとえば、リソースの読み込みをブロックしているブラウザーに関するメッセージのみを表示するには、ボックスに「 block 」と入力します。

正規表現でフィルター処理する

正規表現は、 メッセージをフィルター処理する強力な方法です。 たとえば、[フィルター] テキスト ボックスに「」と入力/^Tracking/して、 という用語Trackingで始まるメッセージのみを表示します。 正規表現に慣れていない場合は、 RegExr.com は正規表現の使用について学ぶのに最適なリソースです。

メッセージ ソースでフィルター処理する

コンソールのサイドバーを使用して、表示するメッセージの種類と各メッセージの送信元を定義できます。

1. [コンソール サイドバーの 表示 ] ボタンをクリックします。

   

   サイドバーが開いているときは、メッセージの総数と、それぞれの送信元を表示できます。 オプションは、All messagesWarningsInfoUser MessagesErrorsおよび Verboseです。

   

2. いずれかのオプションを選択して、その種類のメッセージのみを表示します。 たとえば、ユーザー メッセージを表示するには、[ユーザー メッセージ] オプションをクリックしてノイズを少なく表示します。

   

3. さらにフィルター処理を行い、メッセージ カテゴリを展開するには、メッセージ カテゴリの横にある三角形のアイコンをクリックします。

   

4. 個々のソースが表示され、一覧表示されます。 ソースを選択して、そのソースから発信されたメッセージのみを表示します。