Netwerkactiviteit inspecteren

Kayce Basques

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

Zie Netwerkreferentie als u in plaats daarvan door functies wilt bladeren.

Lees verder of bekijk de videoversie van deze tutorial:

Wanneer moet u het netwerkpaneel gebruiken?

Over het algemeen gebruikt u het netwerkpaneel wanneer u er zeker van wilt zijn dat bronnen worden gedownload of geüpload zoals verwacht. De meest voorkomende gebruiksscenario's voor het netwerkpaneel zijn:

• Ervoor zorgen dat bronnen überhaupt 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 laadprestaties van pagina's te verbeteren, begin dan niet met het netwerkpaneel. Er zijn veel soorten problemen met de laadprestaties die geen verband houden met netwerkactiviteit. Begin met het Lighthouse-paneel, omdat dit u gerichte suggesties geeft over hoe u uw pagina kunt 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 Aan de slag-demo .

   

   Figuur 1 . De demo

   Misschien geeft u er de voorkeur aan om de demo naar een apart venster te verplaatsen.

   

   Figuur 2 . De demo in één venster en deze tutorial in een ander venster

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

   

   Figuur 3 . De console

   Mogelijk geeft u er de voorkeur aan om DevTools aan de onderkant van uw venster te koppelen .

   

   Figuur 4 . DevTools is aan de onderkant van het venster gekoppeld

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

   

   Figuur 5 . DevTools is aan de onderkant van het venster gekoppeld

Op dit moment is het netwerkpaneel leeg. Dat komt omdat DevTools alleen netwerkactiviteit registreert terwijl het open is en er geen netwerkactiviteit heeft plaatsgevonden sinds u DevTools hebt geopend.

Netwerkactiviteit registreren

Om de netwerkactiviteit te bekijken die een pagina veroorzaakt:

1. Herlaad de pagina. Het netwerkpaneel registreert alle netwerkactiviteiten in het netwerklogboek .

   

   Figuur 6 . Het netwerklogboek

   Elke rij van het netwerklogboek vertegenwoordigt een bron. Standaard worden de bronnen chronologisch weergegeven. De bovenste bron is meestal het hoofd-HTML-document. De onderste bron is de bron die het laatst is opgevraagd.

   Elke kolom vertegenwoordigt informatie over een resource. Figuur 6 toont de standaardkolommen:

   • Toestand . De HTTP-antwoordcode.
   • Typ . Het resourcetype.
   • Initiatiefnemer . Wat de oorzaak was van het aanvragen van een resource. Als u op een link in de kolom Initiator klikt, gaat u naar de broncode die het verzoek heeft veroorzaakt.
   • Tijd . Hoe lang het verzoek heeft geduurd.

   • Waterval . Een grafische weergave van de verschillende fasen van de aanvraag. Beweeg over een waterval om een ​​uitsplitsing te zien.

2. Zolang u DevTools geopend heeft, zal het de netwerkactiviteit registreren in het netwerklogboek. Om dit aan te tonen, kijkt u eerst onderaan het netwerklogboek en maakt u een mentale notitie van de laatste activiteit.

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

4. Kijk opnieuw naar de onderkant van het netwerklogboek . Er is een nieuwe bron genaamd getstarted.json . Als u op de knop Gegevens ophalen klikte, vroeg de pagina dit bestand op.

   

   Figuur 7 . Een nieuwe bron in het netwerklogboek

Toon meer informatie

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

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

   

   Figuur 8 . De kolom Domein inschakelen

Simuleer een langzamere netwerkverbinding

De netwerkverbinding van de computer waarmee u sites bouwt is waarschijnlijk sneller dan de netwerkverbindingen van de mobiele apparaten van uw gebruikers. Door de pagina te beperken, krijgt u een beter idee van hoe lang het duurt voordat een pagina op een mobiel apparaat is geladen.

1. Klik op de vervolgkeuzelijst Throttling , die standaard is ingesteld op Online .

   

   Figuur 9 . Beperking inschakelen

2. Selecteer Langzame 3G .

   

   Figuur 10 . Langzame 3G selecteren

3. Druk lang op Herladen en selecteer vervolgens Cache leegmaken en hard opnieuw laden .

   

   Figuur 11 . Cache leegmaken en hard herladen

   Bij herhaalde bezoeken levert de browser meestal enkele bestanden uit de cache , waardoor het laden van de pagina wordt versneld. Cache leegmaken en hard opnieuw laden dwingt de browser om voor alle bronnen het netwerk te gebruiken. Dit is handig als u wilt zien hoe een nieuwe bezoeker het laden van een pagina ervaart.

Maak schermafbeeldingen

Met schermafbeeldingen kunt u zien hoe een pagina er in de loop van de tijd uitzag tijdens het laden.

1. Klik op Schermafbeeldingen vastleggen .

2. Laad de pagina opnieuw via de workflow Cache leegmaken en hard opnieuw laden . Zie Een langzamere verbinding simuleren als u een herinnering nodig heeft over hoe u dit moet doen. Het deelvenster Schermafbeeldingen biedt miniaturen van hoe de pagina er op verschillende punten tijdens het laadproces uitzag.

   

   Figuur 12 . Schermafbeeldingen van het laden van de pagina

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

   

   Figuur 13 . De netwerkactiviteit die plaatsvond tijdens de eerste schermafbeelding

4. Klik op Schermafbeeldingen vastleggen nogmaals om het deelvenster Schermafbeeldingen te sluiten.

5. Laad de pagina opnieuw.

Inspecteer de details van een resource

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

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

   

   Figuur 14 . Het tabblad Kopteksten

2. Klik op het tabblad Voorbeeld . Er wordt een basisweergave van de HTML getoond.

   

   Figuur 15 . Het tabblad Voorbeeld

   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 . De HTML-broncode wordt weergegeven.

   

   Figuur 16 . Het tabblad Reactie

4. Klik op het tabblad Timing . Er wordt een uitsplitsing van de netwerkactiviteit voor deze bron weergegeven.

   

   Figuur 17 . Het tabblad Timing

5. Klik op Sluiten om het netwerklog opnieuw te bekijken.

   

   Figuur 18 . De knop Sluiten

Zoek netwerkheaders en -reacties

Gebruik het zoekvenster wanneer u de HTTP-headers en -antwoorden van alle bronnen moet doorzoeken op een bepaalde tekenreeks of reguliere expressie.

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

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

   

   Figuur 19 . Het zoekvenster

2. Typ Cache-Control en druk op Enter. Het zoekvenster toont alle exemplaren van Cache-Control die worden gevonden in bronkoppen of inhoud.

   

   Figuur 20 . Zoekresultaten voor Cache-Control

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

   

   Figuur 21 . Een zoekresultaat gemarkeerd op het tabblad Kopteksten

4. Sluit het zoekvenster en het tabblad Timing.

   

   Figuur 22 . De knoppen Sluiten

Filter bronnen

DevTools biedt talloze workflows voor het filteren van bronnen die niet relevant zijn voor de uit te voeren taak.

Figuur 23 . De werkbalk Filters

De werkbalk Filters zou standaard ingeschakeld moeten zijn. Als niet:

1. Klik op Filteren om het te laten zien.

Filter op tekenreeks, reguliere expressie of eigenschap

Het tekstvak Filter ondersteunt veel verschillende soorten filters.

1. Typ png in het tekstvak Filter . Alleen de bestanden die de tekst png bevatten, worden getoond. In dit geval zijn de enige bestanden die overeenkomen met het filter de PNG-afbeeldingen.

   

   Figuur 24 . Een stringfilter

2. Typ /.*\.[cj]s+$/ . DevTools filtert elke bron eruit met een bestandsnaam die niet eindigt met een j of een c gevolgd door 1 of meer s tekens.

   

   Figuur 25 . Een reguliere expressiefilter

3. Typ -main.css . DevTools filtert main.css eruit. Als een ander bestand met het patroon overeenkwam, zouden ze ook worden uitgefilterd.

   

   Figuur 26 . Een negatieffilter

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

   

   Figuur 27 . Een eigenschappenfilter

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

5. Verwijder alle tekst uit het tekstvak Filter .

Filter op resourcetype

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

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

   

   Figuur 28 . Alleen CSS-bestanden weergeven

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

   

   Figuur 29 . Alleen CSS- en JS-bestanden weergeven

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

Zie Filteraanvragen voor andere filterworkflows.

Blokkeer verzoeken

Hoe ziet en gedraagt ​​een pagina zich wanneer bepaalde bronnen niet beschikbaar zijn? Mislukt het volledig, of is het nog steeds enigszins functioneel? Blokkeer verzoeken om erachter te komen:

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

   

   Figuur 30 . Het Commandomenu

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

   

   Figuur 31 . Toon verzoekblokkering

3. Klik op Patroon toevoegen .

4. Typ main.css .

   

   Figuur 32 . main.css blokkeren

5. Klik op Toevoegen .

6. Herlaad de pagina. Zoals verwacht is de stijl van de pagina enigszins in de war omdat het hoofdstylesheet is geblokkeerd. Let op de rij main.css in het netwerklogboek. De rode tekst betekent dat de bron is geblokkeerd.

   

   Figuur 33 . main.css is geblokkeerd

7. Schakel het selectievakje Blokkering van verzoeken inschakelen uit.

Volgende stappen

Gefeliciteerd, je hebt de tutorial voltooid. Klik op Award uitreiken om uw beloning te ontvangen.

Bekijk de Netwerkreferentie om meer DevTools-functies te ontdekken met betrekking tot het inspecteren van netwerkactiviteit.