Netwerkactiviteit inspecteren

Kayce Basques

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

Raadpleeg de netwerkreferentie als u liever door de functies wilt bladeren.

Lees verder, of bekijk de videoversie van deze handleiding:

Wanneer moet je het netwerkpaneel gebruiken?

Gebruik het paneel Netwerk over het algemeen wanneer u wilt controleren of resources naar behoren worden gedownload of geüpload. De meest voorkomende toepassingen voor het paneel Netwerk zijn:

• Ervoor zorgen dat bestanden daadwerkelijk worden geüpload of gedownload.
• Het inspecteren van de eigenschappen van een individuele bron, zoals de HTTP-headers, inhoud, grootte, enzovoort.

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

Open het netwerkpaneel.

Om het meeste uit deze handleiding te halen, open je de demo en probeer je de functies op de demopagina uit.

1. Open de demo 'Aan de slag' .

   

   U kunt er ook voor kiezen om de demo in een apart venster te openen.

   

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

   

   Je kunt er ook voor kiezen om DevTools onderaan je venster vast te zetten .

   

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

   

Het paneel Netwerk is momenteel leeg. Dat komt omdat DevTools alleen netwerkactiviteit registreert wanneer het programma open is, en er sinds het openen van DevTools geen netwerkactiviteit heeft plaatsgevonden.

Netwerkactiviteit registreren

Om de netwerkactiviteit te bekijken die een pagina veroorzaakt:

1. Vernieuw de pagina. Het netwerkpaneel registreert alle netwerkactiviteit in het netwerklogboek .

   

   Elke regel in het netwerklogboek vertegenwoordigt een bron. Standaard worden de bronnen chronologisch weergegeven. De bovenste bron is meestal het hoofd-HTML-document. De onderste bron is hetgeen dat als laatste is opgevraagd.

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

   • Status : De HTTP-antwoordcode.
   • Type : Het resourcetype.
   • Initiator : Wat heeft ervoor gezorgd dat een resource werd aangevraagd? Door op een link in de kolom 'Initiator' te klikken, ga je naar de broncode die de aanvraag heeft veroorzaakt.
   • Grootte : De hoeveelheid resources die via het netwerk wordt overgedragen.
   • Tijd : Hoe lang het verzoek duurde.

2. Zolang DevTools open is, wordt netwerkactiviteit vastgelegd in het netwerklogboek . Om dit te demonstreren, kijk eerst onderaan het netwerklogboek en noteer de laatste activiteit.

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

4. Kijk nog eens onderaan het netwerklogboek . Daar staat een nieuwe bron met de naam getstarted.json . Door op de knop ' Gegevens ophalen' te klikken, heeft de pagina dit bestand opgevraagd.

   

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, maar die u wellicht nuttig vindt.

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

   

Simuleer een tragere netwerkverbinding

De netwerkverbinding van de computer die je gebruikt om websites te bouwen, is waarschijnlijk sneller dan de netwerkverbindingen van de mobiele apparaten van je gebruikers. Door de laadsnelheid van de pagina te beperken, krijg je een beter beeld van hoe lang het duurt voordat een pagina op een mobiel apparaat laadt.

1. Klik op het vervolgkeuzemenu 'Throttling' , dat standaard is ingesteld op 'No throttling' .

   

2. Selecteer 3G .

   

3. Houd de knop 'Vernieuwen' ingedrukt en selecteer vervolgens 'Cache leegmaken en geforceerd opnieuw laden' .

   

   Bij herhaalde bezoeken laadt de browser meestal een aantal bestanden uit de cache , wat het laden van de pagina versnelt. De optie 'Cache legen en hard herladen' dwingt de browser om alle bronnen via het netwerk op te halen. Dit is handig als je wilt zien hoe een nieuwe bezoeker een pagina laadt.

Maak schermafbeeldingen

Screenshots laten zien hoe uw pagina er op verschillende momenten tijdens het laden uitziet en rapporteren welke bronnen op elk interval worden geladen.

Volg deze stappen om schermafbeeldingen te maken:

1. Klik op Netwerkinstellingen .

2. Schakel het selectievakje ' Schermafbeeldingen ' in.

3. Vernieuw de pagina met behulp van de workflow 'Cache legen en geforceerd opnieuw laden' . Zie ' Een tragere verbinding simuleren' voor een opfrissing van hoe dit werkt. Op het tabblad 'Schermafbeeldingen' vindt u miniaturen van hoe de pagina er op verschillende momenten tijdens het laadproces uitzag.

   

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

   

5. Schakel het selectievakje 'Schermafbeeldingen' uit om het tabblad 'Schermafbeeldingen' te sluiten.

6. Vernieuw de pagina.

Bekijk de details van een bron.

Klik op een bron om er meer informatie over te krijgen. Probeer het nu:

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

   

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 weergegeven HTML te lezen dan de HTML-broncode, of bij het inspecteren van afbeeldingen.

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

   

4. Klik op het tabblad 'Initiator' om een ​​boomstructuur te bekijken die de keten van verzoekinitiatoren in kaart brengt.

   

5. Klik op het tabblad 'Timing' om een ​​overzicht te zien van de netwerkactiviteit voor deze bron.

   

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

   

Zoek in netwerkheaders en -reacties

Gebruik het tabblad Zoeken wanneer u de HTTP-headers en -reacties van alle bronnen wilt doorzoeken op een bepaalde tekenreeks of reguliere expressie.

Stel bijvoorbeeld dat u wilt controleren of uw resources redelijke cachebeleidsregels hanteren.

1. Klik op Zoeken in de actiebalk van het paneel of druk op Command + F (macOS) of Control + F (Windows/Linux).

   Het tabblad 'Zoeken ' wordt links van het netwerklogboek geopend.

   

2. Typ Cache-Control en druk op Enter. Het tabblad Zoeken toont alle instanties van Cache-Control die in resourceheaders of -content worden gevonden.

   

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

   

4. Sluit het tabblad Zoeken en het tabblad Kopteksten .

   

Filterbronnen

DevTools biedt talloze workflows voor het filteren van resources die niet relevant zijn voor de betreffende taak.

De filterwerkbalk moet standaard ingeschakeld zijn. Zo niet:

1. Klik op Filter filter_alt om het weer te geven.

Filteren op tekenreeks, reguliere expressie of eigenschap

Het filterinvoerveld ondersteunt veel verschillende soorten filters.

1. Typ png in het filterveld . Alleen bestanden die de tekst png bevatten, worden weergegeven. In dit geval zijn de enige bestanden die aan het filter voldoen de PNG-afbeeldingen.

   

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

   

3. Typ -main.css . DevTools filtert main.css eruit. Als een ander bestand aan het patroon voldoet, wordt dat ook gefilterd.

   

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

   

   Zie 'Filter verzoeken op eigenschappen' voor de volledige lijst met filterbare eigenschappen.

5. Verwijder alle tekst uit het filterinvoerveld .

Filteren op resourcetype

Om je te concentreren op een bepaald type bestand, zoals stylesheets:

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

   

2. Om ook scripts te bekijken, houd Control of Command (Mac) ingedrukt en klik vervolgens op JS .

   

3. Klik op Alles om de filters te verwijderen en alle bronnen weer te zien.

Zie Filterverzoeken voor andere filterworkflows.

Blokkeer verzoeken

Hoe ziet een pagina eruit en hoe gedraagt ​​deze zich wanneer sommige van de 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 Command Menu 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. Vernieuw de pagina. Zoals verwacht is de opmaak van de pagina enigszins verstoord, omdat het hoofdstijlbestand is geblokkeerd. Let op de regel main.css in het netwerklogboek. De rode tekst betekent dat de bron is geblokkeerd.

   

7. Schakel het selectievakje 'Verzoekblokkering inschakelen' uit.

Voor meer informatie over DevTools-functies met betrekking tot het inspecteren van netwerkactiviteit, raadpleegt u de Netwerkreferentie .