Netwerkactiviteit inspecteren

Kayce Basques

Dit is een praktische tutorial van enkele van de meestgebruikte DevTools-functies met betrekking tot het inspecteren van de netwerkactiviteit van een pagina.

Zie Netwerkreferentie als u liever door de functies wilt bladeren.

Lees verder of bekijk de videoversie van deze tutorial:

Wanneer u het netwerkpaneel moet gebruiken

Gebruik het paneel Netwerk over het algemeen wanneer u ervoor wilt zorgen dat bronnen zoals verwacht worden gedownload of geüpload. De meest voorkomende toepassingen van het paneel Netwerk zijn:

• Zorgen dat bronnen daadwerkelijk worden geüpload of gedownload.
• Inspecteren van de eigenschappen van een individuele resource, zoals de HTTP-headers, inhoud, grootte, enzovoort.

Als u op zoek bent naar manieren om de laadprestaties van uw pagina te verbeteren, begin dan niet met het paneel Netwerk . Er zijn veel soorten problemen met de laadprestaties die niets met netwerkactiviteit te maken hebben. Begin met het paneel Lighthouse, omdat dit u gerichte suggesties geeft om uw pagina te verbeteren. Zie Websitesnelheid optimaliseren .

Open het netwerkpaneel

Om het maximale uit deze tutorial te halen, opent u de demo en probeert u de functies op de demopagina uit.

1. Open de demo 'Aan de slag' .

   

   U kunt er ook voor kiezen om de demo naar een apart venster te verplaatsen.

   

2. Open DevTools door op Control+Shift+J of Command+Option+J (Mac) te drukken. Het consolepaneel wordt geopend.

   

   U kunt DevTools wellicht beter onderaan uw venster vastzetten .

   

3. Klik op het tabblad Netwerk . Het paneel Netwerk wordt geopend.

   

Het netwerkpaneel is momenteel leeg. Dat komt doordat DevTools alleen netwerkactiviteit registreert wanneer het geopend is en er geen netwerkactiviteit heeft plaatsgevonden sinds u DevTools hebt geopend.

Log netwerkactiviteit

Om de netwerkactiviteit te bekijken die een pagina veroorzaakt:

1. Laad de pagina opnieuw. Het paneel Netwerk registreert alle netwerkactiviteit in het Netwerklogboek .

   

   Elke rij in het netwerklogboek vertegenwoordigt een resource. Standaard worden de resources chronologisch weergegeven. De bovenste resource is meestal het belangrijkste HTML-document. De onderste resource is de laatst opgevraagde resource.

   Elke kolom bevat informatie over een resource. De standaardkolommen zijn:

   • Status : De HTTP-responscode.
   • Type : Het type bron.
   • Initiator : Wat heeft ertoe geleid dat een resource is aangevraagd. Door op een link in de kolom Initiator te klikken, gaat u naar de broncode die de aanvraag heeft veroorzaakt.
   • Grootte : Hoeveelheid bronnen die via het netwerk wordt overgedragen.
   • Tijd : Hoe lang het verzoek duurde.

2. Zolang je DevTools open hebt staan, registreert het de netwerkactiviteit in het netwerklogboek . Om dit te demonstreren, kijk je eerst onderaan het netwerklogboek en noteer je de laatste activiteit.

3. Klik nu op de knop Gegevens ophalen in de demo.

4. Kijk nog eens onderaan het netwerklogboek . Er is een nieuwe resource genaamd getstarted.json . Door op de knop Gegevens ophalen te klikken, vroeg de pagina dit bestand op.

   

Meer informatie weergeven

De kolommen van het netwerklogboek zijn configureerbaar. U kunt kolommen die u niet gebruikt, verbergen. Er zijn ook veel kolommen die standaard verborgen zijn, wat handig kan zijn.

1. Klik met de rechtermuisknop op de kop van de tabel Netwerklogboek en selecteer Domein . Het domein van elke resource wordt nu weergegeven.

   

Simuleer een langzamere netwerkverbinding

De netwerkverbinding van de computer waarmee u websites bouwt, is waarschijnlijk sneller dan de netwerkverbinding van de mobiele apparaten van uw gebruikers. Door de pagina te vertragen, krijgt u een beter beeld van hoe lang het duurt om een ​​pagina te laden op een mobiel apparaat.

1. Klik op de vervolgkeuzelijst Beperking. Deze is standaard ingesteld op Geen beperking .

   

2. Selecteer 3G .

   

3. Houd Vernieuwen ingedrukt en selecteer vervolgens Cache leegmaken en opnieuw laden .

   

   Bij herhaalde bezoeken serveert de browser meestal enkele bestanden uit de cache , wat het laden van de pagina versnelt. Leeg de cache en herlaad de browser om alle bronnen via het netwerk te laden. Dit is handig als u wilt zien hoe een eerste bezoeker het laden van een pagina ervaart.

Schermafbeeldingen maken

Schermafbeeldingen leggen vast hoe uw pagina er op verschillende tijdstippen uitziet terwijl deze wordt geladen. Ook rapporteren ze welke bronnen bij elk interval worden geladen.

Om schermafbeeldingen te maken, volgt u deze stappen:

1. Klik op Netwerkinstellingen instellingen .

2. Schakel het selectievakje Schermafbeeldingen in .

3. Laad de pagina opnieuw met de workflow 'Cache leegmaken en hard herladen' . Zie 'Een tragere verbinding simuleren' voor meer informatie over hoe u dit moet doen. Het tabblad 'Screenshots' toont miniaturen van hoe de pagina er op verschillende punten tijdens het laden uitzag.

   

4. Klik op de eerste miniatuur. DevTools laat zien welke netwerkactiviteit er op dat moment plaatsvond.

   

5. Schakel het selectievakje Schermafbeeldingen in om het tabblad Schermafbeeldingen te sluiten.

6. Laad de pagina opnieuw.

De details van een resource inspecteren

Klik op een bron voor meer informatie. Probeer het nu:

1. Klik op getstarted.html . Het tabblad Headers wordt weergegeven. Gebruik dit tabblad om HTTP-headers te inspecteren.

   

2. Klik op het tabblad Voorbeeld om een ​​eenvoudige HTML-weergave te bekijken.

   

   Dit tabblad is handig wanneer een API een foutcode in HTML retourneert en het gemakkelijker is om de gerenderde HTML te lezen dan de HTML-broncode, of wanneer u afbeeldingen inspecteert.

3. Klik op het tabblad Reactie om de HTML-broncode te bekijken.

   

4. Klik op het tabblad Initiator om een ​​boom te bekijken die de aanvraaginitiatorketen in kaart brengt.

   

5. Klik op het tabblad Timing om een ​​overzicht te bekijken van de netwerkactiviteit voor deze resource.

   

6. Klik op Sluiten om het netwerklogboek opnieuw te bekijken.

   

Zoeknetwerkheaders en -reacties

Gebruik het tabblad Zoeken als u in de HTTP-headers en -reacties van alle bronnen naar een bepaalde tekenreeks of reguliere expressie wilt zoeken.

Stel dat u wilt controleren of uw bronnen een redelijk cachebeleid gebruiken.

1. Klik op Zoeken zoeken . Het tabblad Zoeken wordt links van het netwerklogboek geopend.

   

2. Typ Cache-Control en druk op Enter. Het tabblad Zoeken toont alle exemplaren van Cache-Control die het vindt in resourceheaders of content.

   

3. Klik op een resultaat om het te bekijken. Als de query in een koptekst is gevonden, wordt het tabblad Kopteksten geopend. Als de query in de inhoud is gevonden, wordt het tabblad Reactie geopend.

   

4. Sluit het tabblad Zoeken en het tabblad Kopteksten .

   

Bronnen filteren

DevTools biedt talloze workflows waarmee u bronnen kunt filteren die niet relevant zijn voor de taak die moet worden uitgevoerd.

De filterwerkbalk zou standaard ingeschakeld moeten zijn. Zo niet:

1. Klik op Filter filter_alt om het te tonen.

Filteren op tekenreeks, reguliere expressie of eigenschap

Het invoerveld Filter ondersteunt veel verschillende soorten filtering.

1. Typ png in het invoerveld 'Filter' . Alleen de bestanden met de tekst png worden weergegeven. In dit geval zijn de enige bestanden die aan het filter voldoen de PNG-afbeeldingen.

   

2. Typ /.*\.[cj]s+$/ . DevTools filtert alle bronnen eruit waarvan de bestandsnaam niet eindigt op een j of een c gevolgd door 1 of meer s tekens.

   

3. Typ -main.css . DevTools filtert main.css eruit. Als andere bestanden aan het patroon voldeden, werden deze ook uitgefilterd.

   

4. Typ domain:raw.githubusercontent.com in het tekstvak Filter . DevTools filtert alle bronnen met een URL die niet overeenkomt met dit domein.

   

   Zie Verzoeken filteren op eigenschappen voor de volledige lijst met filterbare eigenschappen.

5. Verwijder alle tekst uit het invoerveld Filter .

Filteren op brontype

Om u te concentreren op een bepaald bestandstype, zoals stylesheets:

1. Klik op CSS . Alle andere bestandstypen worden eruit gefilterd.

   

2. Om ook scripts te zien, houdt u Control of Command (Mac) ingedrukt en klikt u vervolgens op JS .

   

3. Klik op Alles om de filters te verwijderen en alle bronnen opnieuw te bekijken.

Zie Filterverzoeken voor andere filterworkflows.

Blokkeerverzoeken

Hoe ziet een pagina eruit en hoe gedraagt ​​deze zich wanneer sommige bronnen niet beschikbaar zijn? Valt de pagina volledig uit of is deze nog enigszins functioneel? Blokkeer verzoeken om erachter te komen:

1. Druk op Control+Shift+P of Command+Shift+P (Mac) om het opdrachtmenu te openen.

   

2. Typ block , selecteer Show Request Blocking en druk op Enter.

   

3. Klik op de knop Patroon toevoegen .

4. Typ main.css .

   

5. Klik op Toevoegen .

6. Laad de pagina opnieuw. Zoals verwacht is de stijl van de pagina enigszins verstoord omdat de hoofdstijlpagina geblokkeerd is. Let op de rij main.css in het netwerklogboek. De rode tekst betekent dat de bron geblokkeerd is.

   

7. Schakel het selectievakje 'Aanvraagblokkering inschakelen' uit.

Raadpleeg de Network Reference voor meer DevTools-functies met betrekking tot het inspecteren van netwerkactiviteit.