javascript - Finns det ett sätt att filtrera nätverksförfrågningar med Google Chrome utvecklarverktyg?

Är det möjligt att filtrera bort vissa förfrågningar med Chrome utvecklarverktyg, till exempel filtrera bort alla bildförfrågningar?

Svar #1

Negativa textfilter

Använd - i textsökning för att lista resultat som inte matchar en given fråga.

  • Använd -.png eller -.gif eller -.jpg som filter i nätverkspanelen.
  • Många andra negativa filter fungerar också. t.ex. -mime-type:image/png, -larger-than:20k, -domain:yoursite.com, -status-code:404. Se Chromes utvecklardokumentation - filtrering.

Tillgänglig sedan Chrome ~42 - Problemlänk, tillkännagavs här

Filtrera efter 'Begäranstyp'

I Nätverkspanelen, öppna filtret och CTRL/CMD-klicka på de "typer" av förfrågningar du vill visa. För att bara dölja bildförfrågningar, välj då alla andra typer utom bilder medan du håller CTRL/CMD nedtryckt.

Inverta kryssruta

Chrome 94 (~sep 2021) introducerade kryssrutan "Invert". Den inverterar hela nätverkssökningen, medan - kan invertera filter på specifika fält (så "-" är mer kraftfullt/flexibelt. Och dessa fungerar tillsammans.)

Om du använde -.png negativ textsökning, är motsvarigheten .png positiv textsökning och att markera kryssrutan Invertera. Genom att lägga till denna teknik nämner inte DevTools-referensen - negativa textoperatorn, och fokuserar istället på kryssrutan "Invertera".

Regex-sökning

Nätverkssökrutan, liksom andra Dev Tool-sökrutor, stöder regex. Du måste omge med snedstreck /.../ (det finns ingen "Regex"-kryssruta för fliken Nätverk)

Att använda regex möjliggör en smart bildsökning (eller INTE bildsökning) med regex /.(png|jpg|gif)/. Detta låter dig specificera flera bildformat samtidigt (medan en delvis sökning som mime-type:image... verkar inte fungera).

Justera Regex efter dina behov, glöm inte snedstrecken, och invertera med kryssrutan "Invert" (negationsoperatorn - verkar inte fungera med Regex), eller kanske genom att använda inbyggda regexfunktioner

Var försiktig så att du förstår hur Regex fungerar. Strängar med noll längd är en matchning!) Observera också omfattningen av sökningen i Nätverksfliken, som inkluderar "Nätverksrubriker, nyttolaster och svar".

Svar #2

Du skriver -.png -.gif -.jp i filterinmatningsrutan för att utesluta alla bilder från resultaten. Nederst visas den totala mängden överförd data utan bilder.

En "ingenjör på Google som arbetar med Chrome" twittrade i dec '14:

Chrome DevTools: Negativa textfilter har precis landat i Nätverkspanelen. Lista resultat som inte matchar en given fråga Twitter-länk

redigera: du kan till och med filtrera efter domän, mime-typ, filstorlek, ... eller exkludera genom att skriva -domain:cdn.sstatic.net och kombinera någon av dessa mime-type:image/png -larger-than:100K för att visa endast png-filer mindre än 100kb i nätverkspanelen

se DevTools: State Of The Union 2015 av Addy Osmani

Sedan Chrome 42.

Svar #3

Under min version av Google Chrome (Version 74.0.3729.157 (64-bit)), har jag hittat följande filter tillgängliga (jag har lagt till några exempel). Observera att DevTools har en AutoComplete-funktionalitet (vilket hjälper mycket att sortera ut det här).

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

Svar #4

Det finns ingen mycket flexibel filtreringsfunktion, men fältet längst ner gör att du bara kan visa förfrågningar av en viss dokument- eller anslutningstyp:

Du kan inte bara utesluta bilder, men det borde hjälpa.

Du kan också trycka Control/Command+F för att söka efter en viss sträng i begärandelistan, och markera rutan "filter" för att dölja begäranden som inte matchar:

Svar #5

Uppdatering 2021:

I den nya uppdateringen av Chrome kan du enkelt välja vissa innehållstyper JS, CSS, IMG, Font,... för att filtrera förfrågningar; Se:

(nu är jag på version 93.0.4577.63)

Äldre lösning:

En enkel och kort och snabb lösning:

Sätt bara -.

Visa inte någon URL med filändelse (statiskt innehåll), så du har URL:er tydligt här.

Relaterade artiklar