Referentie voor netwerkfuncties

Ontdek nieuwe manieren om te analyseren hoe je pagina wordt geladen in deze uitgebreide referentie van de functies voor netwerkanalyse van Chrome DevTools.

Netwerkverzoeken opnemen

DevTools registreert standaard alle netwerkverzoeken in het deelvenster Netwerk, zolang DevTools is geopend.

Stoppen met netwerkverzoeken registreren

Zo stop je de opname van verzoeken:

• Klik op Netwerklogboekopname stoppen in het deelvenster Netwerk. Het wordt grijs om aan te geven dat DevTools geen verzoeken meer registreert.
• Druk op Command> + E (Mac) of Ctrl + E (Windows, Linux) terwijl het deelvenster Netwerk is geselecteerd.

Verzoeken wissen

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

Verzoeken opslaan tijdens het laden van pagina's

Als je verzoeken wilt opslaan tijdens het laden van pagina's, vink je het selectievakje Logboek behouden aan in het deelvenster Netwerk. DevTools slaat alle verzoeken op totdat je Logboek behouden uitzet.

Screenshots maken tijdens het laden van de pagina

Maak screenshots om te analyseren wat gebruikers zien terwijl ze wachten tot je pagina is geladen.

Als je screenshots wilt aanzetten, open je Instellingen in het deelvenster Netwerk en selecteer je Screenshots maken.

Laad de pagina opnieuw terwijl het deelvenster Netwerk is geselecteerd om screenshots te maken.

Nadat je een screenshot hebt gemaakt, kun je het op de volgende manieren gebruiken:

• Plaats de muisaanwijzer op een screenshot om het punt te bekijken waarop dat screenshot is gemaakt. Er verschijnt een gele lijn op de tijdlijn Overzicht.
• Klik op de thumbnail van een screenshot om verzoeken te filteren die zijn gedaan nadat het screenshot is vastgelegd.
• Dubbelklik op een thumbnail om in te zoomen.

Een verzoek bewerken en opnieuw sturen

Je kunt elk ophaalbaar netwerkverzoek bewerken en opnieuw sturen vanuit de tabel Verzoeken:

1. Klik met de rechtermuisknop op het verzoek en selecteer Bewerken en opnieuw sturen als ophalen. DevTools opent het deelvenster Console met het verzoek ingevuld als een fetch()-aanroep, waarbij de oorspronkelijke verzoekparameters en de uitvoeringscontext behouden blijven.
2. Bewerk de fetch()-aanroep in de Console en druk op Enter om het verzoek opnieuw te sturen.

Laadgedrag wijzigen

Een nieuwe bezoeker emuleren door het browsercachegeheugen uit te zetten

Vink het selectievakje Cache uitzetten aan om na te bootsen hoe een nieuwe gebruiker je site ervaart. DevTools zet het cachegeheugen van de browser uit. Dit bootst de ervaring van een nieuwe gebruiker nauwkeuriger na, omdat verzoeken bij herhaalde bezoeken worden geleverd vanuit het browsercache.

Zet de browsercache uit via het deelvenster Netwerkvoorwaarden.

Als je het cachegeheugen wilt uitzetten terwijl je in andere DevTools-vensters werkt, gebruik je de lade Netwerkomstandigheden.

1. Klik op het icoon  om de lade Netwerkomstandigheden te openen.
2. Vink het selectievakje Cache uitzetten aan of uit.

Het cachegeheugen van de browser handmatig wissen

Als je het browsercachegeheugen op elk moment handmatig wilt legen, klik je met de rechtermuisknop ergens in de tabel Verzoeken en selecteer je Browsercache legen.

Offline emuleren

Er is een nieuwe klasse web-apps, Progressive Web Apps genaamd, die offline kunnen werken met behulp van service workers. Als je dit type app maakt, is het handig om snel een apparaat te kunnen simuleren dat geen dataverbinding heeft.

Als je een volledig offline netwerkervaring wilt simuleren, selecteer je Offline in het dropdownmenu Netwerkbeperking naast het selectievakje Cache uitzetten.

DevTools toont een waarschuwingsicoon naast het tabblad Netwerk om je eraan te herinneren dat offline aanstaat.

Trage netwerkverbindingen emuleren

Als je snelle 4G, langzame 4G of 3G wilt emuleren, selecteer je de bijbehorende voorinstelling in het dropdownmenu Beperking in de actiebalk bovenaan.

Als je Veldstatistieken hebt aangezet in het deelvenster Prestaties, kan een van de beperkingsopties in het menu worden gemarkeerd als aanbevolen op basis van gegevens uit het Chrome User Experience Report.

DevTools toont een waarschuwingsicoon naast het deelvenster Netwerk om je eraan te herinneren dat beperking aanstaat.

Aangepaste beperkingsprofielen maken

Naast voorinstellingen, zoals langzame of snelle 4G, kun je ook je eigen aangepaste beperkingsprofielen toevoegen:

1. Open het menu Throttling (Beperking) en selecteer Custom (Aangepast) > Add... (Toevoegen...).
2. Stel een nieuw beperkingsprofiel in zoals beschreven in Instellingen Instellingen > Beperking.

3. Selecteer in het deelvenster Netwerk je nieuwe profiel in het dropdownmenu Beperking.

   

DevTools toont een waarschuwingsicoon naast het deelvenster Netwerk om je eraan te herinneren dat beperking aanstaat.

WebSocket-verbindingen throttlen

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

Zo observeer je WebSocket-beperking:

1. Start een nieuwe verbinding, bijvoorbeeld met een testtool.
2. Selecteer in het deelvenster Netwerk de optie Geen beperking en stuur een bericht via de verbinding.
3. Maak een heel langzaam aangepast throttlingprofiel, bijvoorbeeld 10 kbit/s. Met zo'n langzaam profiel merk je het verschil.
4. Selecteer het profiel in het deelvenster Netwerk en stuur nog een bericht.
5. Zet het filter WS aan, klik op de naam van je verbinding, open het tabblad Berichten en check het tijdsverschil tussen gestuurde en herhaalde berichten met en zonder beperking. Voorbeeld:

Trage netwerkverbindingen emuleren vanuit de lade Netwerkomstandigheden

Als je de netwerkverbinding wilt beperken terwijl je in andere DevTools-vensters werkt, gebruik je de lade Netwerkomstandigheden.

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

Browsercookies handmatig wissen

Als u browsercookies op elk moment handmatig wilt wissen, klikt u met de rechtermuisknop ergens in de tabel Verzoeken en selecteert u Browsercookies wissen.

HTTP-reactieheaders overschrijven

Ga naar Bestanden en HTTP-reactieheaders lokaal overschrijven.

De user-agent overschrijven

Zo overschrijft u de user-agent handmatig:

1. Klik op het icoon om de lade Netwerkomstandigheden te openen.
2. Vink Automatisch selecteren uit.
3. Kies een user-agentoptie in het menu of voer een aangepaste optie in het vak in.

Zoekopdrachten

Zo zoek je in verzoekheaders, payloads en reacties:

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

   • In macOS: Command + F.
   • In Windows of Linux: Ctrl + F.

2. Voer op het tabblad Zoeken je zoekopdracht in en druk op Enter. Klik desgewenst op match_case of regular_expression om hoofdlettergevoeligheid of reguliere expressies aan te zetten.

3. Klik op een van de zoekresultaten. In het deelvenster Netwerk wordt het overeenkomende verzoek geel gemarkeerd. Het deelvenster opent ook het tabblad Kopteksten of Reactie en markeert de tekenreeks die daar overeenkomt, als die er is.

Klik op Vernieuwen Vernieuwen om de zoekresultaten te vernieuwen. Klik op block Wissen om de resultaten te wissen.

Ga naar Zoeken: tekst zoeken in alle geladen bronnen voor meer informatie over alle manieren waarop je kunt zoeken in DevTools.

Verzoeken filteren

Verzoeken filteren op property's

Gebruik het vak Filteren om verzoeken te filteren op eigenschappen, zoals het domein of de grootte van het verzoek. Je kunt ook een tekstreeks invoeren die overeenkomt met de verzoek-URL, het domein, de hostnaam of de poort (bijvoorbeeld localhost of example.com), inclusief verzoeken van dezelfde site.

Als je het vak niet ziet, is de balk Filters waarschijnlijk verborgen. Zie De filterbalk verbergen.

Als je het filter wilt omkeren, vink je het selectievakje Omkeren naast het vak Filter aan.

Je kunt meerdere property's tegelijk gebruiken door elke property te scheiden met een spatie. mime-type:image/gif larger-than:1K toont bijvoorbeeld alle gif's die groter zijn dan 1 kilobyte. Deze filters voor meerdere property's zijn gelijk aan AND-bewerkingen. OR-bewerkingen worden niet ondersteund.

Hieronder staat een complete lijst met ondersteunde eigenschappen.

• cookie-domain. Toon de resources die een specifiek cookiedomein instellen.
• cookie-name. Toon de bronnen die een specifieke cookienaam instellen.
• cookie-path. Toon de bronnen die een specifiek cookiepad instellen.
• cookie-value. Toon de bronnen die een specifieke cookiewaarde instellen.
• domain. Toon alleen bronnen uit het aangegeven domein. Je kunt een jokerteken (*) gebruiken om meerdere domeinen op te nemen. *.com toont bijvoorbeeld faciliteiten van alle domeinnamen die eindigen op .com. DevTools toont een dropdownmenu voor automatisch aanvullen met alle domeinen die zijn gevonden.
• has-overrides. Toon verzoeken die content, headers, overschrijvingen (yes) of geen overschrijvingen (no) hebben overschreven. U kunt de bijbehorende kolom Heeft overschrijvingen toevoegen aan de verzoektabel.
• has-response-header. Toon de bronnen die de opgegeven HTTP-reactieheader bevatten. DevTools vult het dropdownmenu voor automatisch aanvullen met alle reactieheaders die zijn gevonden.
• is. Gebruik is:running om WebSocket bronnen te vinden.
• larger-than: Toont bronnen die groter zijn dan de aangegeven grootte in bytes. Een waarde van 1000 instellen is hetzelfde als een waarde van 1k instellen.
• method. Toon bronnen die zijn opgehaald via een opgegeven HTTP-methodetype. DevTools vult het dropdownmenu voor automatisch aanvullen met alle HTTP-methoden die zijn gevonden.
• mime-type. Toon bronnen van een opgegeven MIME-type. DevTools vult het dropdownmenu voor automatisch aanvullen met alle MIME-typen die zijn gevonden.
• mixed-content. Toon alle bronnen met gemengde content (mixed-content:all) of alleen de bronnen die worden getoond (mixed-content:displayed).
• priority. Toon bronnen waarvan het prioriteitsniveau overeenkomt met de ingevoerde waarde.
• resource-type. Toon bronnen van een resourcetype, bijvoorbeeld afbeelding. DevTools vult het dropdownmenu voor automatisch aanvullen met alle brontypen die het tegenkomt.
• response-header-set-cookie. Toon onbewerkte Set-Cookie-headers op het tabblad Problemen. Onjuiste cookies met onjuiste Set-Cookie-headers worden gemarkeerd in het deelvenster Netwerk.
• scheme. Toon bronnen die zijn opgehaald via onbeveiligd HTTP (scheme:http) of beveiligd HTTPS (scheme:https).
• set-cookie-domain. Toon de bronnen met een Set-Cookie-kop met een Domain-kenmerk dat overeenkomt met de opgegeven waarde. DevTools vult de functie voor automatisch aanvullen met alle cookiedomeinen die zijn gevonden.
• set-cookie-name. Toon de bronnen die een Set-Cookie-kop hebben met een naam die overeenkomt met de opgegeven waarde. DevTools vult de functie voor automatisch aanvullen met alle cookienamen die zijn gevonden.
• set-cookie-value. Toon de bronnen met een kop Set-Cookie en een waarde die overeenkomt met de ingevoerde waarde. DevTools vult de functie voor automatisch aanvullen in met alle cookiewaarden die zijn gevonden.
• 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 zijn gevonden.
• url. Toon de resources met een url die overeenkomt met de ingevoerde waarde.

Verzoeken filteren op type

Als je verzoeken wilt filteren op resourcetype, klik je op de knop Alles, Ophalen/XHR, JS, CSS, Img, Media, Lettertype, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest of Overig (elk ander type dat hier niet wordt vermeld) in het deelvenster Netwerk.

Als je deze knoppen niet ziet, is de actiebalk Filters waarschijnlijk verborgen. Ga naar De filterbalk verbergen.

Als je bronnen van meerdere typen tegelijk wilt tonen, houd je Command (Mac) of Control (Windows, Linux) ingedrukt en klik je op verschillende typefilters.

Verzoeken filteren op tijd

Sleep naar links of rechts op de tijdlijn Overzicht om alleen de verzoeken te tonen die actief waren tijdens die periode. Het filter is inclusief. Elk verzoek dat actief was tijdens de gemarkeerde tijd, wordt getoond.

Gegevens-URL's verbergen

Gegevens-URL's zijn kleine bestanden die zijn ingesloten in andere documenten. Elk verzoek dat je in de tabel Verzoeken ziet en dat begint met data:, is een gegevens-URL.

Als je deze verzoeken wilt verbergen, selecteer je in de actiebalk Filters de optie Meer filters > check_box Gegevens-URL's verbergen.

Op de statusbalk onderaan staat het aantal getoonde verzoeken van het totaal.

Extensie-URL's verbergen

Als je je wilt concentreren op de code die je schrijft, kun je irrelevante verzoeken wegfilteren die worden gestuurd door extensies die je misschien in Chrome hebt geïnstalleerd. Extensieverzoeken hebben URL's die beginnen met chrome-extension://.

Als je extensieverzoeken wilt verbergen, selecteer je in de actiebalk Filters de optie Meer filters > check_box Extensie-URL's verbergen.

Op de statusbalk onderaan staat het aantal getoonde verzoeken van het totaal.

Alleen de verzoeken met geblokkeerde reactiecookies tonen

Als je alles wilt wegfilteren behalve de verzoeken met reactiecookies die om welke reden dan ook zijn geblokkeerd, selecteer je in de actiebalk Filters de optie Meer filters > check_box Geblokkeerde reactiecookies.

De statusbalk onderaan toont het aantal getoonde verzoeken van het totaal.

Als je wilt weten waarom een reactiecookie is geblokkeerd, selecteer je het verzoek, open je het tabblad Cookies en plaats je de cursor op het informatie-icoon info.

Daarnaast toont het deelvenster Netwerk een waarschuwingsicoon naast een verzoek met geblokkeerde cookies vanwege Chrome-flags of de configuratie. Plaats de cursor op het icoon om een tooltip met een aanwijzing te tonen en klik erop om naar het deelvenster Problemen te gaan voor meer informatie.

Alleen geblokkeerde verzoeken tonen

Als je alles behalve geblokkeerde verzoeken wilt wegfilteren, selecteer je in de actiebalk Filters de optie Meer filters > check_box Geblokkeerde verzoeken. Je kunt dit testen met het tabblad Blokkering voor netwerkverzoeken in de lade.

In de tabel Verzoeken worden geblokkeerde verzoeken rood gemarkeerd. De statusbalk onderaan toont het aantal getoonde verzoeken van het totaal.

Alleen verzoeken van derden tonen

Als je alles wilt wegfilteren behalve de verzoeken met een andere herkomst dan de paginaherkomst, selecteer je in de actiebalk Filters de optie Meer filters > check_box Verzoeken van derden.

Op de statusbalk onderaan staat het aantal getoonde verzoeken van het totaal.

Verzoeken sorteren

De verzoeken in de tabel Verzoeken worden standaard gesorteerd op begintijd, maar je kunt de tabel ook sorteren op 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 kop van de tabel Verzoeken, plaatst u de cursor op Waterval en selecteert u een van de volgende opties:

• Begintijd. Het eerste verzoek dat is gestart, staat bovenaan.
• Responstijd. Het eerste verzoek dat is gedownload, staat bovenaan.
• Eindtijd. Het eerste verzoek dat is afgerond, staat bovenaan.
• Totale duur. Het verzoek met de kortste verbindingsinstellingen en het kortste verzoek / antwoord staat bovenaan.
• Vertraging. Het verzoek dat het kortst op een reactie heeft gewacht, staat bovenaan.

In deze beschrijvingen wordt ervan uitgegaan dat elke optie is gerangschikt van kortste naar langste. Als u op de kop van de kolom Waterval klikt, wordt de volgorde omgekeerd.

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

Verzoeken analyseren

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

Een logboek met verzoeken bekijken

Gebruik de tabel Verzoeken om een logboek te bekijken van alle verzoeken die zijn gedaan terwijl DevTools open is geweest. Als u op verzoeken klikt of de cursor erop plaatst, krijgt u meer informatie over de verzoeken.

De tabel Verzoeken bevat standaard de volgende kolommen:

• Naam. De bestandsnaam van of een ID voor de resource.

• Status. Deze kolom kan de volgende waarden tonen:

  

  • HTTP-statuscode, bijvoorbeeld 200 of 404.
  • CORS error voor verzoeken is mislukt vanwege Cross-Origin Resource Sharing (CORS).
  • (blocked:origin) voor verzoeken met onjuist ingestelde headers. Plaats de cursor op deze statuswaarde om een tooltip te tonen met een hint over wat er is misgegaan.
  • (failed) gevolgd door de foutmelding.

• Type. Het MIME-type van de aangevraagde bron.

• Initiator. De volgende objecten of processen kunnen verzoeken starten:

  • Parser. De HTML-parser van Chrome.
  • Omleiden. Een HTTP-omleiding.
  • Script. Een JavaScript-functie. In dit geval bevat het deelvenster Netwerk een link naar de bijbehorende regel in het bronbestand.
  • Early Hints. Een HTTP-103 Early Hints-reactie.
  • Anders. Een ander proces of een andere actie, zoals naar een pagina navigeren via een link of een URL invoeren in de adresbalk.

• Maat. De gecombineerde grootte van de reactieheaders en de hoofdtekst van de reactie, zoals geleverd door de server.

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

• Waterfall. Een visuele uitsplitsing van de activiteit van elk verzoek.

Kolommen toevoegen of verwijderen

Klik met de rechtermuisknop op de kop van de tabel Verzoeken en selecteer een optie om deze te verbergen of te tonen. Naast de getoonde opties staan vinkjes.

U kunt de volgende extra kolommen toevoegen of verwijderen:

• Verzoek #. De absolute volgorde van de start van het verzoek, standaard vastgezet op de eerste positie in de tabel Verzoeken.
• Pad. Het padgedeelte van de URL.
• URL. De volledige URL van het verzoek.
• Methode. De HTTP-methode van het verzoek (bijvoorbeeld GET, POST, PUT, DELETE).
• Protocol. Het protocol van het verzoek (bijvoorbeeld h2 voor HTTP/2, h3 voor HTTP/3, enzovoort).
• Schema. Het schema-gedeelte van de URL.
• Domein. Het domeingedeelte van de URL.
• Extern adres. Het externe IP-adres en de poort van het verzoek.
• Ruimte voor extern adres. De externe adresruimte van het verzoek. Public voor openbare IP-adressen, Private voor privé-IP-adressen.
• Ruimte voor adres van initiator. De ruimte voor het adres van de initiator van het verzoek. Hetzelfde als op de afstandsbediening.
• Cookies. Het aantal cookies in het verzoek.
• Cookies instellen. Het aantal cookies in de reactie.
• Prioriteit. De prioriteit van het verzoek.
• Verbindings-ID. De verbindings-ID van het verzoek in een clientsessie, indien van toepassing.
• Heeft overschrijvingen. Of het verzoek overschrijvingen heeft (ja, nee, content of headers).
• Is advertentiegerelateerd. Waar of niet waar?
• Vooraf geladen. Of het verzoek is gestart met speculatieve preloading.
• Renderblokkering. Of het verzoek renderblokkerend, mogelijk blokkerend of niet is.
• Waterfall. Een visuele uitsplitsing van de activiteit van elk verzoek.

Aangepaste kolommen toevoegen

Zo voegt u een aangepaste kolom toe aan de tabel Verzoeken:

1. Klik met de rechtermuisknop op de kop van de tabel Verzoeken en selecteer Reactieheaders > Headerkolommen beheren.
2. Klik in het dialoogvenster op Aangepaste kop toevoegen, voer de naam in en klik op Toevoegen.

Verzoeken groeperen op inline frames

Als inline frames op een pagina veel verzoeken starten, kunt u het verzoeklogboek overzichtelijker maken door ze te groeperen.

Als u verzoeken wilt groeperen op iframes, opent u Instellingen in het deelvenster Netwerk en vinkt u check_box Groeperen op frame aan.

Als je een verzoek wilt bekijken dat door een inline frame is gestart, vouw je het uit in het verzoeklogboek.

De timing van verzoeken in relatie tot elkaar bekijken

Gebruik de Waterfall om de timing van verzoeken in relatie tot elkaar te bekijken. Standaard is de waterval geordend op de begintijd van de verzoeken. Verzoeken die verder naar links staan, zijn dus eerder gestart dan verzoeken die verder naar rechts staan.

Ga naar Sorteren op activiteitsfase voor de verschillende manieren waarop je de Waterfall kunt sorteren.

De berichten van een WebSocket-verbinding analyseren

Zo bekijk je de berichten van een WebSocket-verbinding:

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

Als je de tabel wilt vernieuwen, klik je opnieuw op de naam van de WebSocket-verbinding in de kolom Naam van de tabel Verzoeken.

De tabel bevat 3 kolommen:

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

Berichten hebben een kleurcode op basis van het type:

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

Gebeurtenissen in een stream analyseren

Zo bekijk je de gebeurtenissen die servers streamen via de Fetch API, EventSource API en XHR:

1. Netwerkverzoeken opnemen op een pagina die gebeurtenissen streamt.
2. Selecteer in Netwerk een verzoek en open het tabblad EventStream.

Als u gebeurtenissen wilt filteren, voert u een reguliere expressie in de filterbalk bovenaan het tabblad EventStream in.

Als je de lijst met vastgelegde gebeurtenissen wilt wissen, klik je op blokkeren Wissen.

Een voorbeeld van een reactiebody bekijken

Zo bekijk je een voorbeeld van een reactiebody:

1. Selecteer een verzoek in de kolom Naam in de tabel Verzoeken.
2. Open het tabblad Voorbeeld.

Dit tabblad is vooral handig om afbeeldingen te bekijken.

Een reactiebody bekijken

Zo bekijk je de reactiebody van een verzoek:

1. Selecteer een verzoek in de kolom Naam in de tabel Verzoeken.
2. Open het tabblad Reactie.

Voor binaire of gecomprimeerde reacties selecteert u een decoderingsmethode (Base64, Hex of UTF-8) in het dropdownmenu onderaan het tabblad Reactie.

HTTP-headers bekijken

Zo bekijk je de HTTP-headergegevens van een verzoek:

1. Selecteer een verzoek in de kolom Naam in de tabel Verzoeken.
2. Open het tabblad Headers en scroll omlaag naar de gedeelten Algemeen, Reactieheaders, Verzoekheaders en eventueel Headers voor vroege hints.

In het gedeelte Algemeen toont DevTools een door mensen leesbaar statusbericht naast de ontvangen HTTP-statuscode.

In het gedeelte Reactieheaders kun je de cursor op een headerwaarde plaatsen en op de knop Bewerken Bewerken klikken om de reactieheader lokaal te overschrijven.

Bron van HTTP-header bekijken

Standaard worden op het tabblad Koppen de kopnamen alfabetisch getoond. Zo bekijkt u de namen van de HTTP-headers in de volgorde waarin ze zijn ontvangen:

1. Open het tabblad Kopteksten voor het verzoek waarin je geïnteresseerd bent. Ga naar HTTP-headers bekijken.
2. Klik op Bron bekijken naast het gedeelte Verzoekheader of Reactieheader.

Waarschuwing voor voorlopige headers

Soms staat op het tabblad Koppen de waarschuwingsmelding Provisional headers are shown.... Dit kan de volgende redenen hebben:

• Het verzoek is niet via het netwerk gestuurd, maar vanaf een lokaal cachegeheugen waar de originele verzoekheaders niet zijn opgeslagen. In dat geval kunt u caching uitzetten om de volledige verzoekheaders te bekijken.

• De netwerkresource is ongeldig. Voer bijvoorbeeld fetch("https://jec.fish.com/unknown-url/") uit in de Console.

DevTools kan om veiligheidsredenen ook alleen voorlopige headers tonen.

Payload van verzoek bekijken

Als u de payload van het verzoek wilt bekijken, dat wil zeggen de parameters voor de querytekenreeks en formuliergegevens, selecteert u een verzoek in de tabel Verzoeken en opent u het tabblad Payload.

Payloadbron bekijken

DevTools toont de payload standaard in een door mensen leesbare vorm.

Als u de bronnen van parameters voor de querytekenreeks en formuliergegevens wilt bekijken, klikt u op het tabblad Payload op bron bekijken naast de gedeelten Parameters voor de querytekenreeks of Formuliergegevens.

URL-gecodeerde query- en formulierparameters bekijken

DevTools toont querytekenreeksparameters en formuliergegevens standaard in een URL-gedecodeerde vorm. Als u URL-codering voor argumenten wilt aan- of uitzetten op het tabblad Payload, klikt u op URL-gecodeerd bekijken of Gedecodeerd bekijken.

Binaire en gecomprimeerde payloads bekijken

Voor binaire of gecomprimeerde verzoekpayloads selecteer je een decoderingsmethode (Base64, Hex of UTF-8) in het dropdownmenu onderaan het tabblad Payload.

Cookies bekijken

Zo bekijk je de cookies die in de HTTP-header van een verzoek zijn gestuurd:

1. Selecteer een verzoek in de kolom Naam in de tabel Verzoeken.
2. Open het tabblad Cookies.

Ga naar Velden voor een beschrijving van elke kolom.

Ga naar Cookies bekijken, bewerken en verwijderen om cookies aan te passen.

Apparaatgebonden sessies bekijken

Op het tabblad Apparaatgebonden sessies staat de uitstel- (vernieuwings)informatie die is gekoppeld aan het geselecteerde verzoek voor alle actieve apparaatgebonden sessies op een site.

Zo bekijk je de informatie over uitstel (vernieuwen):

1. Selecteer een verzoek in de kolom Naam in de tabel Verzoeken.
2. Open het tabblad Apparaatgebonden sessies.

Het tabblad Sessies die aan een apparaat zijn gekoppeld wordt alleen getoond voor relevante verzoeken met cookies. Op het tabblad staan alle actieve apparaatgebonden sessies en of de sessies het verzoek hebben uitgesteld (en zo niet, waarom niet). De mogelijke uitstelopties zijn:

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

De timinganalyse van een verzoek bekijken

Zo bekijkt u de uitsplitsing van de timing van een verzoek:

1. Selecteer een verzoek in de kolom Naam in de tabel Verzoeken.
2. Open het tabblad Timing.

Ga naar Een voorbeeld van een uitsplitsing van de timing bekijken voor een snellere manier om toegang te krijgen tot deze gegevens.

Ga naar Uitleg van de fasen van de uitsplitsing van de timing voor meer informatie over de fasen die je misschien ziet op het tabblad Timing.

Een voorbeeld van een timingoverzicht bekijken

Als je een voorbeeld van de timing van een verzoek wilt bekijken, plaats je de cursor op de vermelding van het verzoek in de kolom Waterfall van de tabel Verzoeken.

Ga naar De timinganalyse van een verzoek bekijken voor een manier om toegang te krijgen tot deze gegevens zonder de muisaanwijzer op de gegevens te plaatsen.

Uitleg over de fasen van de timing-uitsplitsing

Hier vindt u meer informatie over elke fase die u op het tabblad Timing kunt tegenkomen:

• In de wachtrij. De browser plaatst verzoeken in de wachtrij voordat de verbinding wordt gestart en wanneer:
  • Er zijn verzoeken met een hogere prioriteit. De prioriteit van een verzoek wordt bepaald door factoren zoals het type bron en de locatie in het document. Lees het gedeelte over bronprioriteit in de fetchpriority-handleiding voor meer informatie.
  • Er zijn al 6 TCP-verbindingen geopend voor deze oorsprong. Dit is de limiet. (Alleen van toepassing op HTTP/1.0 en HTTP/1.1.)
  • De browser wijst even ruimte toe in het schijfcachegeheugen.
• Vastgelopen. Het verzoek kan na de start van de verbinding worden vertraagd om een van de redenen die worden beschreven in In de wachtrij plaatsen.
• DNS-lookup. De browser lost het IP-adres van het verzoek op.
• Eerste verbinding. De browser maakt een verbinding, waaronder TCP-handshakes of nieuwe pogingen en onderhandelingen over een SSL.
• Proxyonderhandeling. De browser onderhandelt over het verzoek met een proxyserver.
• Verzoek gestuurd. Het verzoek wordt gestuurd.
• ServiceWorker voorbereiden. De browser start de service worker.
• Verzoek aan ServiceWorker. Het verzoek wordt naar de servicemedewerker gestuurd.
• Wachten (TTFB). De browser wacht op het eerste byte van een reactie. TTFB staat voor Time To First Byte (tijd tot eerste byte). Deze timing omvat 1 retourvlucht van de wachttijd en de tijd die de server nodig had om de reactie voor te bereiden.
• Content downloaden. De browser krijgt de reactie, rechtstreeks van het netwerk of van een servicemedewerker. Deze waarde is de totale tijd die is besteed aan het lezen van de reactiebody. Waarden die hoger zijn dan verwacht, kunnen duiden op een traag netwerk of dat de browser bezig is met ander werk, waardoor de reactie vertraagd wordt gelezen.

Initiators en afhankelijkheden bekijken

Als je de initiators en afhankelijkheden van een verzoek wilt bekijken, houd je Shift ingedrukt en plaats je de cursor op het verzoek in de tabel Verzoeken. DevTools kleurt initiators groen en afhankelijkheden rood.

Als de tabel Verzoeken chronologisch is geordend, is het eerste groene verzoek boven het verzoek waar je de cursor op plaatst de initiator van de afhankelijkheid. Als er nog een groen verzoek boven staat, is dat hogere verzoek de initiator van de initiator. Enzovoort.

Laadgebeurtenissen bekijken

DevTools toont de timing van de gebeurtenissen DOMContentLoaded en load op meerdere plaatsen in het deelvenster Netwerk. De gebeurtenis DOMContentLoaded is blauw en de gebeurtenis load is rood.

Het totale aantal verzoeken bekijken

Het totale aantal verzoeken staat in de statusbalk onderaan het deelvenster Netwerk.

De totale grootte van overgezette en geladen bronnen bekijken

DevTools toont de totale grootte van overgezette en geladen (niet-gecomprimeerde) bronnen in de statusbalk onderaan het deelvenster Netwerk.

Ga naar De niet-gecomprimeerde grootte van een bron bekijken om te zien hoe groot bronnen zijn nadat de browser ze heeft gedecomprimeerd.

De stacktrace bekijken die een verzoek heeft veroorzaakt

Als een JavaScript-instructie ervoor zorgt dat een bron wordt aangevraagd, plaatst u de cursor op de kolom Initiator om de stacktrace te bekijken die tot het verzoek heeft geleid.

De niet-gecomprimeerde grootte van een bron bekijken

Selecteer Instellingen > Grote verzoekrijen en bekijk de onderste waarde van de kolom Grootte.

In dit voorbeeld was de gecomprimeerde grootte van het www.google.com-document dat via het netwerk werd verstuurd 43.8 KB, terwijl de niet-gecomprimeerde grootte 136 KB was.

Gegevens van exportverzoeken

U kunt de lijst met verzoeken, met toegepaste filters, op verschillende manieren exporteren of kopiëren, zoals hieronder beschreven.

Alle netwerkverzoeken opslaan in een HAR-bestand

HAR (HTTP Archive) is een bestandsindeling die door verschillende HTTP-sessietools wordt gebruikt om de vastgelegde gegevens te exporteren. De indeling is een json-object met een bepaalde set velden.

Je kunt standaard het 'opgeschoonde' netwerklogboek exporteren in HAR-indeling zonder gevoelige informatie, zoals Cookie-, Set-Cookie- en Authorization-headers. Zo verklein je de kans dat gevoelige informatie per ongeluk uitlekt. Indien nodig kunt u het logboek ook exporteren met gevoelige gegevens.

Als u alle netwerkverzoeken wilt opslaan in een HAR-bestand, kiest u een van deze 2 manieren:

• Klik met de rechtermuisknop op een verzoek in de tabel Verzoeken en selecteer Kopiëren > Alles [vermeld] opslaan als HAR (opgeschoond) of Alles [vermeld] opslaan als HAR (met gevoelige gegevens).

  

• Klik op downloaden HAR exporteren (opgeschoond)... in de actiebalk bovenaan het deelvenster Netwerk.

  Als je wilt exporteren met gevoelige gegevens, zet je eerst de instellingen aan. Instellingen > Voorkeuren > Netwerk > check_box Toestaan dat HAR wordt gemaakt met gevoelige gegevens. Klik daarna op de knop downloaden Exporteren en selecteer HAR exporteren (met gevoelige gegevens) in het dropdownmenu.

  

Nadat u een HAR-bestand heeft, kunt u het op 2 manieren weer importeren in DevTools voor analyse:

• Sleep het HAR-bestand naar de tabel Verzoeken.
• Klik op uploaden HAR importeren in de actiebalk bovenaan het deelvenster Netwerk.

Een verzoek, een gefilterde set verzoeken of alle verzoeken naar het klembord kopiëren

Klik in de kolom Naam van de tabel Verzoeken met de rechtermuisknop op een verzoek, plaats de cursor op Kopiëren en selecteer een van de volgende opties.

Zo kopieer je een afzonderlijk verzoek, de reactie of het stacktrace:

• URL kopiëren. Kopieer de URL van het verzoek naar het klembord.
• Kopiëren als cURL. Kopieer het verzoek als een cURL-opdracht.
• Kopiëren als PowerShell. Kopieer het verzoek als een PowerShell-opdracht.
• Kopiëren als fetch. Kopieer het verzoek als een fetch-aanroep.
• Kopiëren als fetch (Node.js). Kopieer het verzoek als een Node.js-fetch-aanroep.
• Kopiëren als preload-element. Kopieer het verzoek als een <link rel="preload"> HTML-tag.
• Reactie kopiëren. Kopieer de hoofdtekst van de reactie naar het klembord.
• Stacktrace kopiëren. Kopieer de stacktrace van het verzoek naar het klembord.

Zo kopieer je alle verzoeken:

• Alle URL's kopiëren: Kopieer de URL's van alle verzoeken naar het klembord.
• Alles kopiëren als cURL. Kopieer alle verzoeken als een keten van cURL-opdrachten.
• Alles kopiëren als PowerShell. Kopieer alle verzoeken als een keten van PowerShell-opdrachten.
• Alles kopiëren als fetch. Kopieer alle verzoeken als een keten van fetch-aanroepen.
• Alles kopiëren als fetch (Node.js). Kopieer alle verzoeken als een keten van Node.js-ophalingen.
• Alles kopiëren als HAR (schoongemaakt). Kopieer alle verzoeken als HAR-gegevens zonder gevoelige gegevens, zoals Cookie-, Set-Cookie- en Authorization-headers.
• Alles kopiëren als HAR (met gevoelige gegevens). Kopieer alle verzoeken als HAR-gegevens met gevoelige gegevens.

Als je een gefilterde set verzoeken wilt kopiëren, pas je een filter toe op het netwerklogboek, klik je met de rechtermuisknop op een verzoek en selecteer je een van de volgende opties:

• Alle vermelde URL's kopiëren: Kopieer de URL's van alle gefilterde verzoeken naar het klembord.
• Alles kopiëren als cURL. Kopieer alle gefilterde verzoeken als een keten van cURL-opdrachten.
• Alles kopiëren als PowerShell. Kopieer alle gefilterde verzoeken als een keten van PowerShell-opdrachten.
• Kopieer alles dat als ophalen wordt vermeld. Kopieer alle gefilterde verzoeken als een keten van ophaaloproepen.
• Kopieer alles als fetch (Node.js). Kopieer alle gefilterde verzoeken als een keten van Node.js-fetch-aanroepen.
• Kopieer alles als HAR (schoongemaakt). Kopieer alle gefilterde verzoeken als HAR-gegevens zonder gevoelige gegevens, zoals de headers Cookie, Set-Cookie en Authorization.
• Alles kopiëren als HAR (met gevoelige gegevens). Kopieer alle gefilterde verzoeken als HAR-gegevens met gevoelige gegevens.

De lay-out van het deelvenster Netwerk wijzigen

Vouw gedeelten van de UI van het deelvenster Netwerk uit of samen om je te richten op wat belangrijk voor je is.

De actiebalk Filters verbergen

DevTools toont standaard de filterbalk bovenaan het deelvenster Netwerk. Klik op filter_alt Filter om het te verbergen.

Rijen voor grote verzoeken gebruiken

Gebruik grote rijen als je meer witruimte wilt in de tabel met netwerkverzoeken. Sommige kolommen bieden ook wat meer informatie als je grote rijen gebruikt. De onderste waarde van de kolom Grootte is bijvoorbeeld de niet-gecomprimeerde grootte van een verzoek en de kolom Prioriteit toont zowel de initiële (onderste waarde) als de uiteindelijke (bovenste waarde) ophaalprioriteit.

Open Instellingen en klik op Grote verzoekrijen om grote rijen te bekijken.

De overzichtstrack verbergen

DevTools toont standaard de track Overzicht. Open Instellingen en vink het selectievakje Overzicht tonen uit om het te verbergen.