web-dev-qa-db-ja.com

Google Chrome開発者ツールを使用してネットワークリクエストをフィルタリングする方法はありますか？

Chrome開発者ツールを使用して一部のリクエストを除外すること、たとえばすべての画像リクエストを除外することは可能ですか？

javascriptgoogle-chromegoogle-chrome-devtoolsfiltering
104
Adam Lee

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

画像を除外することはできませんが、役立つはずです。

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

enter image description here

19
Jeremy Banks

ネガティブテキストフィルター-結果を一覧表示not指定されたクエリに一致。

Chrome〜42以降で使用可能- 問題リンク 、発表済み ここ

別のアプローチ： [ネットワーク]パネルでフィルターを開き、 CTRL/CMD表示するリクエストの種類をクリックします。画像リクエストのみを非表示にするには、他のすべてのタイプを選択します除く CTRL/CMD。

217
Mark Doyle

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

「Chromeで作業しているGoogleのエンジニア」が12月14日にTwitterでツイートしました：

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

edit：-domain:cdn.sstatic.netを入力してドメイン、MIMEタイプ、ファイルサイズ、...でフィルタリングしたり、これらを組み合わせたりすることもできます。 mime-type:image/png -larger-than:100Kは、ネットワークパネルに100kbより小さいpngファイルのみを表示します

DevTools：State of The Union 2015 by Addy Osmani を参照してください

Chrome 42以降。

30
Ivica Vucemilo

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
7
YenForYang

-MimeTypeと同様に、次のようにフィルター入力でドメインを使用できます。

domain：yourdomain.com

5
Jules Goullee

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

1
Matt

enter image description here

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

1
Beat Richartz