Google Chrome geliştirici araçlarını kullanarak ağ isteklerini filtrelemenin bir yolu var mı?

Chrome geliştirici araçlarını kullanarak bazı istekleri filtrelemek, örneğin tüm resim isteklerini filtrelemek mümkün müdür?

Çok esnek bir filtreleme özelliği yoktur, ancak alttaki çubuk yalnızca belirli bir belge veya bağlantı türünün isteklerini göstermenize izin verir:

Görüntüleri hariç tutamazsınız, ancak yardımcı olmalı.

Ayrıca istek listesinde belirli bir dizeyi aramak için Control/ Command+ tuşlarına basabilir Fve eşleşmeyen istekleri gizlemek için "filtre" kutusunu işaretleyebilirsiniz:

Negatif metin filtreleri - Liste sonuçları değil , belirli bir sorguyla eşleşen.

• Kullanım -.png veya -.gif veya -.jpg ağ paneline filtre olarak.
• Diğer birçok negatif filtre de çalışır. mesela -mime tipi: image / png , -larger-daha: 20k , -Domain: yoursite.com , -durum-kodu: 404 . Chrome geliştirici belgelerine bakın - Sıralama ve filtreleme .

Chrome ~ 42'den beri kullanılabilir - Sorun Bağlantısı , burada duyurulur

Başka bir yaklaşım: Ağ panelinde filtreyi açın ve CTRL/CMDgöstermek istediğiniz istek türlerini tıklayın. Yalnızca görüntü isteklerini gizlemek için , tutarken görüntüler dışındaki tüm diğer türleri seçin CTRL/CMD.

-.png -.gif -.jpTüm görüntüleri sonuçlardan çıkarmak için filtre giriş kutusuna yazarsınız . Alt kısımda, resimsiz aktarılan toplam veri miktarını gösterir.

Aralık'14'te "Chrome'da çalışan Google'da çalışan bir mühendis" Twitter'da şunları söyledi:

Chrome DevTools: Negatif metin filtreleri, Ağ paneline yeni geldi. Liste sonuçları değil , belirli bir sorguyla eşleşen Heyecan Bağlantı

düzenleme : hatta etki alanına, mime türüne, dosya boyutuna göre filtreleyebilir ... veya ağ panelinde yalnızca 100kb'den küçük png dosyalarını göstermek için -domain:cdn.sstatic.netbunlardan herhangi birini girip birleştirerek hariç tutabilirsiniz.mime-type:image/png -larger-than:100K

bakınız DevTools: Birliğin Durumu 2015, Addy Osmani

Chrome 42'den beri .

Google Chrome yapımda (Sürüm 74.0.3729.157 (64-bit)), aşağıdaki filtreleri buldum (bazı örnekler ekledim). DevTools'un bir Otomatik Tamamlama işlevine sahip olduğunu unutmayın (bu, bu tür şeyleri sıralamak için çok yardımcı olur).

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

-MimeType gibi, filtre girişinde etki alanını şu şekilde kullanabilirsiniz:

domain: yourdomain.com

Basit, kısa ve hızlı bir çözüm:

Sadece koy -.

Uzantılı herhangi bir url gösterme (statik içerik), dolayısıyla burada açıkça URL'leriniz var.

Geliştirici araçlarını açarsanız, ağı seçin. Özellikle resim isteklerini aramak istiyorsanız, sayfanın altındaki çubuktan resimleri seçin. Filtrelerin tümü özeldir, bu nedenle yalnızca resim isteklerini filtreleyemezsiniz. İşte gidiyorsun.

Bir -MimeType:image/jpegfiltre eklemek benim için çalıştı.