Google Chromeデベロッパーツールを使用してネットワークリクエストをフィルタリングする方法はありますか?


125

Chromeデベロッパーツールを使用して一部のリクエストを除外することは可能ですか?たとえば、すべての画像リクエストを除外しますか?


29
再開する投票; これは話題から外れていると考えるべきではありません。Chrome / WebKit開発者ツールは明らか「プログラマーが一般的に使用するソフトウェアツール」です(FAQで許可されています)。私は開発中にフィルタリングオプションをよく利用しました。
Jeremy Banks


正しい答えを選択してください。マークされた答えは古くなっています。
Suraj Jain、

回答:


21

非常に柔軟なフィルタリング機能はありませんが、下部のバーでは、特定のドキュメントまたは接続タイプのリクエストのみを表示できます。

画像を除外するだけでなく、役立つはずです。

Control/ Command+ Fを押してリクエストリスト内の特定の文字列を検索し、[フィルター]ボックスをオンにして、一致しないリクエストを非表示にすることもできます。

ここに画像の説明を入力してください


9
この回答は古くなっています。次の
未定義

256

除外テキストフィルター -結果をリストしない指定されたクエリに一致します。

Chrome〜42から利用可能 - ここで発表されたIssue Link

別のアプローチ: [ネットワーク]パネルでフィルターを開き、表示するCTRL/CMDリクエストのタイプををクリックします。画像リクエストのみを非表示にするには、を押しながら画像以外のすべてのタイプ選択しますCTRL/CMD


2
使用CMDは、OS X上でクリック+
未定義の

7
httpステータスコードやその他の機能でフィルタリングすることもできます。たとえば、domain、has-response-header、is、larger-than、method、mime-type、scheme、set-cookie-name、set-cookie-value、セットクッキードメイン、ステータスコード、およびあなたは、200、404または302でないすべての要求を参照するには、たとえば、一度に複数で使用をフィルタリングすることができます:-status-code:200 -status-code:404 -status-code:302
ブラッド・パークス

3
LinuxでChromeバージョン「51.0.2704.79(64ビット)」を使用します。除外フィルターが削除されたようですか?他の誰かがそれを見て?
Wilson F

4
Chrome 52でもまだ機能しないようですが、この機能を悲しいことに機能させることができません。
JKillian

2
これを機能させるには、フィルター入力の横にある「正規表現」チェックボックスをオフにする必要があることに注意してください。また、それは注意して-.js両方を除外します.js.jsonリクエスト。何らかの理由で、ネガティブフィルターの構文は、最新のドキュメントカバーされいないようです。
ジェームズ

34

あなたが書く -.png -.gif -.jp結果からすべての画像を除外するには、フィルター入力ボックスにます。下部には、画像なしで転送されたデータの総量が表示されます。

「Chromeに取り組んでいるGoogleのエンジニア」が12月14日にTwitterでツイートした。

Chrome DevTools:ネガティブテキストフィルターがネットワークパネルに追加されました。特定のクエリに一致しない結果を一覧表示する Twitterリンク

編集:ドメイン、MIMEタイプ、ファイルサイズなどでフィルタリングしたり-domain:cdn.sstatic.net、これらのいずれかを入力して組み合わせて除外したりmime-type:image/png -larger-than:100K、ネットワークパネルに100 kb未満のpngファイルのみを表示することもできます

AddToolsによるDevTools:State Of The Union 2015を参照してください

Chrome 42以降


2
おかげで、そのdomain:部分はまさに私が今探していたものです。それと他の多くは現在、他の回答からリンクされたドキュメントでカバーされています
JMM

13

私のビルドのGoogle Chrome(バージョン74.0.3729.157(64ビット))で、次のフィルターが使用できることがわかりました(いくつかの例を追加しました)。DevToolsにはオートコンプリート機能があることに注意してください(この機能を整理するのに役立ちます)。

domain:
-domain:
    # Use a * character to include multiple domains.
    # Ex:  *.com, domain:google.com, -domain:bing.com

has-response-header:
-has-response-header:
    # Filter resources with the specified HTTP response header.
    # Ex: has-response-header:Content-Type, has-response-header:age

is:
-is:
    # is:running finds WebSocket resources
    # I've also come across:
    #  - is:from-cache,
    #  - is:service-worker-initiated
    #  - is:service-worker-intercepted


larger-than:
-larger-than:
    # Note: larger-than:1000 is equivalent to larger-than:1k
    # Ex: larger-than:420, larger-than:4k, larger-than:100M

method:
-method:
    # method:POST, -method:OPTIONS, method:PUT, method:GET

mime-type:
-mime-type:
    # Ex: mime-type:application/manifest+json, mimetype:image/x-icon


mixed-content:
-mixed-content:
    # 2 that I've found documented: 
    #   mixed-content:all (Show all mixed-content resources) 
    #   mixed-content:displayed (Show only those currently displayed) (never used this personally)

scheme:
-scheme:
    # Ex: scheme:http, scheme:https,
    # Note that there are also scheme:chrome-extension, scheme:data

set-cookie-domain:
-set-cookie-domain:
    # 
    # Ex: set-cookie-domain:.google.com

set-cookie-name:
-set-cookie-name:
    # Match Set-Cookie response headers with name
    # Ex: set-cookie-name:WHATUP

set-cookie-value:
-set-cookie-value:
    # Match Set-Cookie response headers with value
    # Ex: set-cookie-value:AISJHD98ashfa93q2rj_94w-asd-yolololo

status-code:
-status-code:
    # Match HTTP status code
    # Ex: status-code:200, -status-code:302


4

シンプルで短く、迅速なソリューション:

置くだけ -.

拡張子(静的コンテンツ)を含むURLを表示しないため、ここにURLが明確に表示されます。

正規表現フィルター


1

ここに画像の説明を入力してください

開発者ツールを開いたら、ネットワークを選択します。画像リクエストを特に探したい場合は、ページ下部のバーから画像を選択します。フィルターはすべて排他的であるため、画像リクエストのみを除外することはできません。どうぞ。


1

-MimeType:image/jpegフィルターを追加するのがうまくいきました。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.