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 .

   

   Misschien geeft u er de voorkeur aan 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.

   

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

   

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

   

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. Laad de pagina opnieuw. Het netwerkpaneel registreert alle netwerkactiviteiten in 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. De standaardkolommen zijn:

   • Status : de HTTP-antwoordcode.
   • Type : het resourcetype.
   • Initiator : Wat heeft ertoe geleid dat een resource is aangevraagd. Als u op een link in de kolom Initiator klikt, gaat u naar de broncode die het verzoek heeft veroorzaakt.
   • Grootte : hoeveelheid bronnen die via het netwerk wordt overgedragen.
   • Tijd : Hoe lang het verzoek duurde.
   Opmerking: de grafiek boven het netwerklogboek wordt het overzicht genoemd. Je zult het niet gebruiken in deze zelfstudie, dus je kunt het verbergen als je dat liever hebt. Zie Het overzichtsspoor verbergen .

2. Zolang u DevTools geopend heeft, wordt de netwerkactiviteit geregistreerd in het netwerklogboek . Om dit aan te tonen, kijkt u eerst onderaan het Netwerklogboek en noteert u 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.

   

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.

   

Tip: U kunt de volledige URL van een bron zien door de muisaanwijzer op de cel in de kolom Naam te plaatsen.

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 Beperking, die standaard is ingesteld op Geen beperking .

   

2. Selecteer 3G .

   

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

   

   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.

   Opmerking: De workflow Cache leegmaken en hard herladen is alleen beschikbaar als DevTools geopend is.

Maak schermafbeeldingen

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

Volg deze stappen om schermafbeeldingen te maken:

1. Klik op Netwerkinstellingen instellingen .

2. Schakel het selectievakje Screenshots check_box in.

3. Laad de pagina opnieuw met behulp van 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 tabblad Schermafbeeldingen biedt miniaturen van hoe de pagina er op verschillende punten tijdens het laadproces uitzag.

   

4. Klik op de eerste miniatuur. DevTools laat u 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.

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.

   

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.

   

   Tip: Wanneer een bestand is verkleind, wordt de inhoud van het bestand opnieuw opgemaakt voor leesbaarheid door op de knop Format data_object onder aan het tabblad Reactie te klikken.

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

   

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

   

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

   

Zoek netwerkheaders en -reacties

Gebruik het tabblad Zoeken 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 zoeken . Het tabblad Zoeken wordt links van het netwerklogboek geopend.

   

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

   

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.

   

4. Sluit het tabblad Zoeken en het tabblad Kopteksten .

   

Filter bronnen

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

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

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

Filter op tekenreeks, reguliere expressie of eigenschap

Het invoervak ​​Filter ondersteunt veel verschillende soorten filtering.

1. Typ png in het invoervak ​​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.

   

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.

   

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

   

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

   

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

5. Verwijder alle tekst uit het filterinvoervak .

Filter op resourcetype

Om u te concentreren op een bepaald type bestand, 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 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.

   

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 in de war omdat het hoofdstijlblad is geblokkeerd. Let op de rij main.css in het netwerklogboek. De rode tekst betekent dat de bron is geblokkeerd.

   

7. Schakel het selectievakje Blokkering van verzoeken inschakelen uit.

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