Chrome DevTools: Sådan filtreres netværksanmodninger

Som frontend-udviklere tilbringes det meste af vores tid i browseren med DevTools åben (næsten altid, medmindre vi ser YouTube ... nogle gange endda da).

En af de store sektioner i DevTools er networkfanen. Der er et par ting, du kan gøre på networkfanen, som følgende:

• Find netværksanmodninger via tekst
• Find netværksanmodninger efter regex-udtryk
• Filtrer (ekskluder) netværksanmodninger
• Brug egenskabsfilteret til at se netværksanmodninger fra et bestemt domæne
• Find netværksanmodninger efter ressourcetype

I forbindelse med denne vejledning bruger jeg freeCodeCamps hjemmeside, freecodecamp.org/news . Gå blot til siden og åbn networkfanen.

Du kan se networkfanen ved at trykke cmd + opt + jpå din Mac eller ctrl + shift + ji Windows. Det åbner consolesom standard fanen i DevTools.

Når consolefanen er åben, skal du blot klikke på networkfanen for at gøre den synlig.

Når networkfanen er åben, kan vi begynde vores tutorial.

Lad os begynde

Sørg for, at den korrekte side er åben (freecodecamp.org/news), og at fanen "netværk" er åben i DevTools:

• Den grønne boks her illustrerer ikonet, der kan skjule / vise filterområdet i netværkspanelfanen.
• Den røde boks her illustrerer filterområdet. Med dette felt kan vi filtrere netværksanmodninger ud.

Find netværksanmodning via tekst

Skriv analyticsi tekstfeltet Filter. Kun de filer, der indeholder teksten analytics, vises.

Find netværksanmodning ved regex-udtryk

Type /.*\min.[c]s+$/. DevTools filtrerer alle ressourcer ud med filnavne, der slutter med min.cefterfulgt af 1 eller flere stegn.

Filtrer (ekskluder) netværksanmodning

Type -min.js. DevTools filtrerer alle filer, der indeholder min.js. Hvis en anden fil matcher mønsteret, bliver de også filtreret ud og vil ikke være synlige i netværkspanelet.

Brug egenskabsfilter til at se netværksanmodning fra et bestemt domæne

Skriv domain:code.jquery.comi filterområdet. Det viser kun netværksanmodninger, der hører til URL'en code.jquery.com.

Find netværksanmodning efter ressourcetype

Hvis du kun vil se, hvilken skrifttypefil der bruges på en bestemt side, skal du klikke på Font:

Eller hvis du kun vil se, at websokkelfilerne indlæses på en bestemt side, skal du klikke på WS:

Du kan også gå et skridt videre og se begge Font& WSfiler sammen. Klik blot på Fontførst, og cmdklik derefter på for WSat vælge flere faner. (Hvis du er på en Windows-maskine, kan du vælge flere ved at bruge ctrlklik).

Det er det til denne tutorial. Hvis du fandt det nyttigt, så del det med dine kolleger og lad mig også vide, hvad du synes på twitter.com/adeelibr .