Referentie netwerkfuncties

Kayce Basques

Sofia Emelianova

Ontdek nieuwe manieren om te analyseren hoe uw pagina laadt in deze uitgebreide referentie met netwerkanalysefuncties van Chrome DevTools.

Netwerkverzoeken opnemen

Standaard registreert DevTools alle netwerkverzoeken in het paneel Netwerk , zolang DevTools geopend is.

Stop met het opnemen van netwerkverzoeken

Om het opnemen van verzoeken te stoppen:

• Klik op STOP NETWERK Netwerklogboek op het paneel Netwerk . Het wordt grijs om aan te geven dat DevTools geen verzoeken meer registreert.
• Druk op Command > + E (Mac) of Control + E (Windows, Linux) terwijl het paneel Netwerk scherp is.

Duidelijke verzoeken

Klik op Wissen op het paneel Netwerk om alle verzoeken uit de tabel Verzoeken te wissen.

Verzoeken opslaan tijdens het laden van pagina's

Om verzoeken over meerdere pagina's heen op te slaan, vinkt u het selectievakje Logboek bewaren aan in het paneel Netwerk . DevTools slaat alle verzoeken op totdat u Logboek bewaren uitschakelt.

Maak screenshots tijdens het laden van de pagina

Maak schermafbeeldingen om te analyseren wat gebruikers zien terwijl ze wachten tot de pagina is geladen.

Om schermafbeeldingen in te schakelen, opent u Instellingen in het paneel Netwerk en vink het vakje Schermafbeeldingen maken aan.

Laad de pagina opnieuw terwijl het Netwerkpaneel scherp is om schermafbeeldingen te maken.

Nadat u een screenshot hebt gemaakt, kunt u er op de volgende manieren mee werken:

• Beweeg de muis over een schermafbeelding om het moment te bekijken waarop de schermafbeelding is gemaakt. Er verschijnt een gele lijn op de tijdlijn Overzicht .
• Klik op de miniatuur van een schermafbeelding om alle verzoeken te filteren die zijn uitgevoerd nadat de schermafbeelding is gemaakt.
• Dubbelklik op een miniatuur om erop in te zoomen.

XHR-verzoek opnieuw afspelen

Om een ​​XHR-aanvraag opnieuw af te spelen, voert u een van de volgende handelingen uit in de tabel Aanvragen :

• Selecteer het verzoek en druk op R.
• Klik met de rechtermuisknop op de aanvraag en selecteer Replay XHR .

Laadgedrag wijzigen

Een eerste bezoeker nabootsen door de browsercache uit te schakelen

Om te emuleren hoe een nieuwe gebruiker uw site ervaart, vinkt u het vakje 'Cache uitschakelen' aan. DevTools schakelt de browsercache uit. Dit emuleert de ervaring van een nieuwe gebruiker nauwkeuriger, omdat verzoeken bij herhaalde bezoeken vanuit de browsercache worden verwerkt.

Schakel de browsercache uit via de lade Netwerkvoorwaarden

Als u de cache wilt uitschakelen terwijl u in andere DevTools-panelen werkt, gebruikt u de lade Netwerkvoorwaarden .

1. Klik op de pictogram om de lade Netwerkvoorwaarden te openen.
2. Schakel het selectievakje Cache uitschakelen in of uit.

De browsercache handmatig wissen

U kunt de browsercache op elk gewenst moment handmatig wissen door met de rechtermuisknop ergens in de tabel Verzoeken te klikken en Browsercache wissen te selecteren.

Offline emuleren

Er is een nieuwe klasse webapps, genaamd Progressive Web Apps , die offline kunnen functioneren met behulp van serviceworkers . Bij het bouwen van dit type app is het handig om snel een apparaat te kunnen simuleren dat geen dataverbinding heeft.

Om een ​​volledig offline netwerkervaring te simuleren, selecteert u Offline in het vervolgkeuzemenu Netwerkbeperking naast het selectievakje Cache uitschakelen .

DevTools geeft een waarschuwingspictogram weer naast het tabblad Netwerk om u eraan te herinneren dat offline is ingeschakeld.

Trage netwerkverbindingen emuleren

Om snel 4G, langzaam 4G of 3G te emuleren, selecteert u de overeenkomstige voorinstelling in het vervolgkeuzemenu ' Throttling ' in de actiebalk bovenaan.

DevTools geeft een waarschuwingspictogram weer naast het paneel Netwerk om u eraan te herinneren dat beperking is ingeschakeld.

Aangepaste throttling-profielen maken

Naast voorinstellingen, zoals langzaam of snel 4G, kunt u ook uw eigen aangepaste bandbreedtebeperkingsprofielen toevoegen:

1. Open het menu Beperking en selecteer Aangepast > Toevoegen... .
2. Stel een nieuw bandbreedtebeperkingsprofiel in zoals beschreven in Instellingen > bandbreedtebeperking .

3. Ga terug naar het paneel Netwerk en selecteer uw nieuwe profiel in het vervolgkeuzemenu Beperking.

   

DevTools geeft een waarschuwingspictogram naast het paneel Netwerk om u eraan te herinneren dat bandbreedtebeperking is ingeschakeld.

Throttle WebSocket-verbindingen

Naast HTTP-verzoeken beperkt DevTools sinds versie 99 ook WebSocket-verbindingen.

Om WebSocket-beperking te observeren:

1. Maak een nieuwe verbinding, bijvoorbeeld met behulp van een testtool .
2. Selecteer op het paneel Netwerk de optie Geen beperking en stuur een bericht via de verbinding.
3. Maak een zeer langzaam aangepast throttlingprofiel , bijvoorbeeld 10 kbit/s . Zo'n langzaam profiel zal je helpen het verschil te merken.
4. Selecteer het profiel in het paneel Netwerk en stuur nog een bericht.
5. Schakel het WS- filter in, klik op de naam van je verbinding, open het tabblad Berichten en controleer het tijdsverschil tussen verzonden en gereproduceerde berichten met en zonder bandbreedtebeperking. Bijvoorbeeld:

Trage netwerkverbindingen emuleren vanuit de lade Netwerkvoorwaarden

Als u de netwerkverbinding wilt beperken terwijl u in andere DevTools-panelen werkt, gebruikt u de lade Netwerkvoorwaarden .

1. Klik op de pictogram om de lade Netwerkvoorwaarden te openen.
2. Selecteer een verbindingssnelheid in het menu Netwerkbeperking .

Browsercookies handmatig wissen

U kunt op elk gewenst moment handmatig browsercookies wissen door met de rechtermuisknop ergens in de tabel Aanvragen te klikken en Browsercookies wissen te selecteren.

HTTP-responsheaders overschrijven

Zie Bestanden en HTTP-antwoordheaders lokaal overschrijven .

De gebruikersagent overschrijven

Om de gebruikersagent handmatig te overschrijven:

1. Klik op de pictogram om de lade Netwerkvoorwaarden te openen.
2. Automatisch selecteren wissen.
3. Kies een gebruikersagentoptie uit het menu of voer een aangepaste optie in het vak in.

Zoekopdrachten

Zo zoekt u in aanvraagheaders, payloads en reacties:

1. Druk op de volgende sneltoets om het tabblad Zoeken aan de rechterkant te openen:

   • Op macOS, Command + F.
   • Op Windows of Linux, Control + F.

2. Voer op het tabblad Zoeken uw zoekopdracht in en druk op Enter . Klik eventueel op match_case of regular_expression om respectievelijk hoofdlettergevoeligheid of reguliere expressies in te schakelen.

3. Klik op een van de zoekresultaten. Het paneel 'Netwerk' markeert in geel de overeenkomende aanvraag. Daarnaast opent het paneel ook het tabblad 'Kopteksten' of 'Reactie' en markeert de tekenreeks die daar overeenkomt, indien van toepassing.

Om de zoekresultaten te vernieuwen, klikt u op Vernieuwen . Om de resultaten te wissen, klikt u op Blokkeren .

Zie Zoeken: Zoek tekst in alle geladen bronnen voor meer informatie over alle manieren waarop u kunt zoeken in DevTools.

Filterverzoeken

Filteraanvragen per eigenschappen

Met het filtervak ​​kunt u verzoeken filteren op eigenschappen, zoals het domein of de grootte van het verzoek.

Als u het vakje niet kunt zien, is de filterbalk waarschijnlijk verborgen. Zie De filterbalk verbergen .

Om uw filter om te keren, vinkt u het selectievakje Omkeren naast het vak Filter aan.

U kunt meerdere eigenschappen tegelijk gebruiken door elke eigenschap met een spatie te scheiden. Bijvoorbeeld, mime-type:image/gif larger-than:1K geeft alle GIF's weer die groter zijn dan één kilobyte. Deze filters voor meerdere eigenschappen zijn gelijk aan EN-bewerkingen. OF-bewerkingen worden niet ondersteund.

Hieronder vindt u een complete lijst met ondersteunde eigenschappen.

• cookie-domain . Toon de bronnen die een specifiek cookiedomein instellen.
• cookie-name . Toon de bronnen die een specifieke cookienaam instellen.
• cookie-path . Toon de bronnen die een specifiek cookie-pad instellen.
• cookie-value . Toon de bronnen die een specifieke cookiewaarde instellen.
• domain . Alleen bronnen van het opgegeven domein weergeven. U kunt een jokerteken ( * ) gebruiken om meerdere domeinen op te nemen. Bijvoorbeeld, *.com geeft bronnen weer van alle domeinnamen die eindigen op .com . DevTools vult het vervolgkeuzemenu voor automatisch aanvullen met alle domeinen die het heeft aangetroffen.
• has-overrides . Toon verzoeken met overschreven content , headers , eventuele overrides ( yes ) of geen overrides ( no ). U kunt de bijbehorende kolom ' Heeft overrides' toevoegen aan de aanvraagtabel.
• has-response-header . Toont de resources die de opgegeven HTTP-responsheader bevatten. DevTools vult de vervolgkeuzelijst voor automatisch aanvullen met alle responsheaders die het is tegengekomen.
• is . Gebruik is:running om WebSocket bronnen te vinden.
• larger-than . Toon bronnen die groter zijn dan de opgegeven grootte, in bytes. Het instellen van een waarde van 1000 is gelijk aan het instellen van een waarde van 1k .
• method . Toont bronnen die zijn opgehaald via een opgegeven HTTP-methodetype. DevTools vult de vervolgkeuzelijst voor automatisch aanvullen met alle HTTP-methoden die het is tegengekomen.
• mime-type . Toont bronnen van een bepaald MIME-type. DevTools vult de vervolgkeuzelijst voor automatisch aanvullen met alle MIME-typen die het is tegengekomen.
• mixed-content . Toon alle bronnen met gemengde inhoud ( mixed-content:all ) of alleen de bronnen die worden weergegeven ( mixed-content:displayed ).
• priority . Toon bronnen waarvan het prioriteitsniveau overeenkomt met de opgegeven waarde.
• resource-type . Toont resources van een resourcetype, bijvoorbeeld afbeelding. DevTools vult de vervolgkeuzelijst voor automatisch aanvullen met alle resourcetypen die het is tegengekomen.
• response-header-set-cookie . Toon onbewerkte Set-Cookie-headers op het tabblad Problemen. Misvormde cookies met onjuiste Set-Cookie headers worden gemarkeerd in het paneel Netwerk.
• scheme . Toon bronnen die zijn opgehaald via onbeschermde HTTP ( scheme:http ) of beveiligde HTTPS ( scheme:https ).
• set-cookie-domain . Toont de resources met een Set-Cookie header met een Domain -kenmerk dat overeenkomt met de opgegeven waarde. DevTools vult de autocomplete met alle cookiedomeinen die het is tegengekomen.
• set-cookie-name . Toont de bronnen met een Set-Cookie header met een naam die overeenkomt met de opgegeven waarde. DevTools vult de autocomplete met alle cookienamen die het is tegengekomen.
• set-cookie-value . Toont de bronnen die een Set-Cookie header hebben met een waarde die overeenkomt met de opgegeven waarde. DevTools vult de autocomplete met alle cookiewaarden die het is tegengekomen.
• status-code . Toon alleen bronnen waarvan de HTTP-statuscode overeenkomt met de opgegeven code. DevTools vult het dropdownmenu voor automatisch aanvullen met alle statuscodes die het is tegengekomen.
• url . Toon de bronnen die een url hebben die overeenkomt met de opgegeven waarde.

Verzoeken filteren op type

Om verzoeken op resourcetype te filteren, klikt u op de knoppen Alles , Fetch/XHR , JS , CSS , Img , Media , Lettertype , Doc , WS (WebSocket), Wasm (WebAssembly), Manifest of Anders (een ander type dat hier niet wordt vermeld) op het paneel Netwerk .

Als u deze knoppen niet kunt zien, is de filteractiebalk waarschijnlijk verborgen. Zie De filterbalk verbergen .

Om bronnen van meerdere typen tegelijk weer te geven, houdt u Command (Mac) of Control (Windows, Linux) ingedrukt en klikt u vervolgens op verschillende typefilters.

Verzoeken filteren op tijd

Sleep naar links of rechts op de tijdlijn Overzicht om alleen de verzoeken weer te geven die actief waren in dat tijdsbestek. Het filter is inclusief. Elk verzoek dat actief was in de gemarkeerde periode, wordt weergegeven.

Gegevens-URL's verbergen

Data-URL's zijn kleine bestanden die in andere documenten zijn ingesloten. Elk verzoek in de tabel ' Aanvragen' dat begint met data: is een data-URL.

Als u deze verzoeken wilt verbergen, selecteert u in de actiebalk Filters de optie Meer filters > selectievakje Gegevens-URL's verbergen .

In de statusbalk onderaan wordt het aantal getoonde verzoeken ten opzichte van het totaal aantal.

Verberg extensie-URL's

Om je te concentreren op de code die je schrijft, kun je irrelevante verzoeken filteren die worden verzonden door extensies die je mogelijk in Chrome hebt geïnstalleerd. Extensieverzoeken hebben URL's die beginnen met chrome-extension:// .

Als u extensieverzoeken wilt verbergen, selecteert u in de actiebalk Filters de optie Meer filters > selectievakje Verberg extensie-URL's .

In de statusbalk onderaan wordt het aantal getoonde verzoeken ten opzichte van het totaal aantal.

Toon alleen de verzoeken met geblokkeerde responscookies

Om alles te filteren behalve de verzoeken waarvoor responscookies om welke reden dan ook zijn geblokkeerd, selecteert u in de actiebalk Filters de optie Meer filters > selectievakje Geblokkeerde responscookies . Probeer het op deze demopagina .

In de statusbalk onderaan wordt het aantal getoonde verzoeken ten opzichte van het totaal aantal.

Om te achterhalen waarom een ​​reactiecookie is geblokkeerd, selecteert u het verzoek, opent u het tabblad Cookies en beweegt u de muisaanwijzer over het informatie -icoontje.

Bovendien toont het paneel Netwerk een waarschuwingspictogram naast een verzoek waarbij cookies geblokkeerd zijn vanwege Chrome-vlaggen of configuratie. Beweeg de muis over het pictogram om een ​​tooltip met een aanwijzing te zien en klik erop om naar het paneel Problemen te gaan voor meer informatie.

Alleen geblokkeerde verzoeken weergeven

Om alles behalve geblokkeerde verzoeken te filteren, selecteert u in de actiebalk Filters de optie Meer filters > selectievakje Geblokkeerde verzoeken . Om dit te testen, kunt u het tabblad Netwerkverzoeken blokkeren in de lade gebruiken.

De tabel Verzoeken markeert geblokkeerde verzoeken in het rood. De statusbalk onderaan geeft het aantal weergegeven verzoeken ten opzichte van het totaal weer.

Alleen verzoeken van derden weergeven

Om alles te filteren behalve de verzoeken waarvan de oorsprong verschilt van de paginaherkomst, selecteert u in de actiebalk Filters de optie Meer filters > selectievakje Verzoeken van derden . Probeer het op deze demopagina .

In de statusbalk onderaan wordt het aantal getoonde verzoeken ten opzichte van het totaal aantal.

Verzoeken sorteren

Standaard worden de verzoeken in de tabel Verzoeken gesorteerd op initiatietijd, maar u kunt de tabel sorteren met behulp van andere criteria.

Sorteren op kolom

Klik op de kop van een kolom in de tabel Verzoeken om verzoeken op die kolom te sorteren.

Sorteren op activiteitsfase

Als u wilt wijzigen hoe de waterval verzoeken sorteert, klikt u met de rechtermuisknop op de koptekst van de tabel Verzoeken, beweegt u de muisaanwijzer over Waterval en selecteert u een van de volgende opties:

• Starttijd . Het eerste verzoek dat is gestart, staat bovenaan.
• Reactietijd . Het eerste verzoek dat met downloaden begint, staat bovenaan.
• Eindtijd . Het eerste verzoek dat is afgerond, staat bovenaan.
• Totale duur . Het verzoek met de kortste verbindingsopbouw en het kortste verzoek/antwoord staat bovenaan.
• Latentie . Het verzoek dat het kortst op een reactie wacht, staat bovenaan.

Deze beschrijvingen gaan ervan uit dat elke optie gerangschikt is van kort naar lang. Door op de kolomkop ' Waterval ' te klikken, wordt de volgorde omgedraaid.

In dit voorbeeld is de waterval gesorteerd op totale duur. Het lichte gedeelte van elke balk geeft de wachttijd aan. Het donkere gedeelte geeft de tijd aan die is besteed aan het downloaden van bytes.

Verzoeken analyseren

Zolang DevTools open is, worden alle verzoeken geregistreerd in het paneel Netwerk . Gebruik het paneel Netwerk om verzoeken te analyseren.

Bekijk een logboek van verzoeken

Gebruik de tabel 'Aanvragen' om een ​​logboek te bekijken van alle aanvragen die zijn gedaan terwijl DevTools geopend was. Door erop te klikken of de muis erover te bewegen, krijgt u meer informatie over de aanvragen.

In de tabel Verzoeken worden standaard de volgende kolommen weergegeven:

• Naam . De bestandsnaam van, of een identificatie voor, de resource.

• Status . Deze kolom kan de volgende waarden weergeven:

  

  • HTTP-statuscode, bijvoorbeeld 200 of 404 .
  • CORS error voor aanvragen die zijn mislukt vanwege Cross-Origin Resource Sharing (CORS).
  • (blocked:origin) voor verzoeken met verkeerd geconfigureerde headers. Beweeg de muisaanwijzer over deze statuswaarde om een ​​tooltip te zien met een hint over wat er mis is gegaan.
  • (failed) gevolgd door de foutmelding.

• Type . Het MIME-type van de gevraagde resource.

• Initiator . De volgende objecten of processen kunnen verzoeken initiëren:

  • Parser . De HTML-parser van Chrome.
  • Omleiden . Een HTTP-omleiding.
  • Script . Een JavaScript-functie.
  • Overig . Een ander proces of een andere actie, zoals navigeren naar een pagina met behulp van een link of het invoeren van een URL in de adresbalk.

• Grootte . De gecombineerde grootte van de antwoordheaders plus de antwoordbody, zoals geleverd door de server.

• Tijd . De totale duur, vanaf het begin van de aanvraag tot de ontvangst van de laatste byte in het antwoord.

• Waterval . Een visueel overzicht van de activiteit van elk verzoek.

Kolommen toevoegen of verwijderen

Klik met de rechtermuisknop op de kop van de tabel 'Aanvragen ' en selecteer een optie om deze te verbergen of weer te geven. De weergegeven opties zijn voorzien van vinkjes.

U kunt de volgende extra kolommen toevoegen of verwijderen: Pad , URL , Methode , Protocol , Schema , Domein , Extern adres , Externe adresruimte , Initiatoradresruimte , Cookies , Cookies instellen , Prioriteit , Verbindings-ID , Heeft overschrijvingen en Waterval .

Aangepaste kolommen toevoegen

Om een ​​aangepaste kolom aan de tabel Aanvragen toe te voegen:

1. Klik met de rechtermuisknop op de koptekst van de tabel Aanvragen en selecteer Antwoordheaders > Koptekstkolommen beheren .
2. Klik in het dialoogvenster op Aangepaste koptekst toevoegen , voer de naam in en klik op Toevoegen .

Groepsverzoeken per inline-frame

Als inline frames op een pagina veel verzoeken initiëren, kunt u het verzoeklogboek gebruiksvriendelijker maken door ze te groeperen.

Om verzoeken door Iframes te groeperen, open instellingen in het paneel Netwerk en vink het vakje Groeperen op frame aan.

Als u een aanvraag wilt bekijken die is gestart door een inline-frame, vouwt u deze uit in het aanvraaglogboek.

Bekijk de timing van verzoeken ten opzichte van elkaar

Gebruik de waterval om de timing van verzoeken ten opzichte van elkaar te bekijken. Standaard is de waterval geordend op basis van de starttijd van de verzoeken. Verzoeken die verder naar links staan, starten dus eerder dan verzoeken die verder naar rechts staan.

Zie Sorteren op activiteitenfase om de verschillende manieren te zien waarop u de Waterval kunt sorteren.

Analyseer de berichten van een WebSocket -verbinding

Om de berichten van een WebSocket-verbinding te bekijken:

1. Klik onder de kolom Naam van de tabel Verzoeken op de URL van de WebSocket-verbinding.
2. Klik op het tabblad Berichten . De tabel toont de laatste 100 berichten.

Om de tabel te vernieuwen, klikt u opnieuw op de naam van de WebSocket-verbinding onder de kolom Naam van de tabel Aanvragen .

De tabel bevat drie kolommen:

• Gegevens . De berichtlading. Als het bericht platte tekst is, wordt het hier weergegeven. Voor binaire opcodes geeft deze kolom de naam en code van de opcode weer. De volgende opcodes worden ondersteund: Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame en Pong Frame.
• Lengte . De lengte van de berichtlading, in bytes.
• Tijd . Het tijdstip waarop het bericht is ontvangen of verzonden.

Berichten zijn kleurgecodeerd volgens hun type:

• Uitgaande tekstberichten zijn lichtgroen.
• Binnenkomende tekstberichten zijn wit.
• WebSocket-opcodes zijn lichtgeel.
• Fouten zijn lichtrood.

Gebeurtenissen in een stream analyseren

Om de gebeurtenissen te bekijken die servers via Fetch API ,