Referentie netwerkfuncties

Kayce Basques

Sofia Emelianova

Ontdek nieuwe manieren om te analyseren hoe uw pagina laadt in dit uitgebreide naslagwerk over netwerkanalysefuncties van Chrome DevTools.

Registreer netwerkverzoeken

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

Stop met het registreren van netwerkverzoeken.

Om te stoppen met het registreren van verzoeken:

• Klik op 'Netwerklogboekregistratie stoppen'. In het netwerkpaneel wordt het grijs om aan te geven dat DevTools geen verzoeken meer registreert.
• Druk op Command + E (Mac) of Control + E (Windows, Linux) terwijl het netwerkpaneel is geselecteerd.

Duidelijke verzoeken

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

Bewaar verzoeken tijdens het laden van pagina's

Om verzoeken te bewaren bij het laden van pagina's, vinkt u het selectievakje 'Logboek behouden' aan in het paneel 'Netwerk' . DevTools bewaart alle verzoeken totdat u 'Logboek behouden' uitschakelt.

Maak schermafbeeldingen tijdens het laden van de pagina.

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

Om schermafbeeldingen in te schakelen, open je de instellingen. Ga naar het paneel Netwerk en vink 'Schermafbeeldingen maken' aan.

Vernieuw de pagina terwijl het netwerkpaneel is geselecteerd om schermafbeeldingen te maken.

Nadat je een schermafbeelding hebt gemaakt, kun je er op de volgende manieren mee interageren:

• Beweeg de muis over een schermafbeelding om te zien op welk moment die schermafbeelding is gemaakt. Er verschijnt een gele lijn op de tijdlijn van het overzicht .
• Klik op de miniatuur van een schermafbeelding om alle verzoeken te filteren die na het maken van de schermafbeelding hebben plaatsgevonden.
• Dubbelklik op een miniatuur om erop in te zoomen.

XHR-verzoek opnieuw afspelen

Om een ​​XHR-verzoek opnieuw af te spelen, kunt u een van de volgende acties uitvoeren in de tabel 'Verzoeken' :

• Selecteer het verzoek en druk op R.
• Klik met de rechtermuisknop op het verzoek en selecteer 'XHR opnieuw afspelen' .

Laadgedrag wijzigen

Simuleer een eerste bezoek door de browsercache uit te schakelen.

Om de ervaring van een nieuwe gebruiker op uw site na te bootsen, vinkt u het selectievakje 'Cache uitschakelen' aan. DevTools schakelt de browsercache uit. Dit simuleert de ervaring van een nieuwe gebruiker nauwkeuriger, omdat verzoeken bij herhaalde bezoeken vanuit de browsercache worden verwerkt.

Schakel de browsercache uit via het menu 'Netwerkinstellingen'.

Als u de cache wilt uitschakelen tijdens het werken in andere DevTools-panelen, gebruikt u het menu 'Netwerkcondities' .

1. Klik op de pictogram om het menu Netwerkcondities te openen.
2. Schakel het selectievakje 'Cache uitschakelen' in of uit.

Wis handmatig de browsercache.

Om de browsercache op elk gewenst moment handmatig te wissen, klikt u met de rechtermuisknop ergens in de tabel 'Verzoeken' en selecteert u 'Browsercache wissen' .

Offline emuleren

Er is een nieuwe categorie webapps, genaamd Progressive Web Apps , die offline kunnen functioneren met behulp van service workers . Bij het ontwikkelen van dit type app is het handig om snel een apparaat zonder dataverbinding te kunnen simuleren.

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.

Simuleer trage netwerkverbindingen

Om snelle 4G, trage 4G of 3G te simuleren, selecteer je de bijbehorende preset in het vervolgkeuzemenu 'Throttling ' in de actiebalk bovenaan.

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

Maak aangepaste throttlingprofielen aan.

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

1. Open het menu 'Throttle' en selecteer 'Aangepast' > 'Toevoegen...' .
2. Stel een nieuw beperkingsprofiel in zoals beschreven in de instellingen onder Instellingen > Beperking .

3. Ga terug naar het netwerkpaneel en selecteer uw nieuwe profiel in het vervolgkeuzemenu 'Throttling' .

   

DevTools geeft een Een waarschuwingspictogram naast het netwerkpaneel herinnert u eraan dat bandbreedtebeperking is ingeschakeld.

Beperk WebSocket-verbindingen

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

Om de beperking van WebSocket-verkeer te observeren:

1. Leg een nieuwe verbinding tot stand, bijvoorbeeld met behulp van een testtool .
2. Selecteer in het paneel Netwerk de optie Geen beperking van de bandbreedte en verstuur een bericht via de verbinding.
3. Maak een aangepast bandbreedtebeperkingsprofiel aan met een zeer lage snelheid, bijvoorbeeld 10 kbit/s . Met zo'n laag profiel zul je het verschil merken.
4. Selecteer in het netwerkpaneel het profiel en verstuur nog een bericht.
5. Schakel het WS- filter in of uit, klik op uw verbindingsnaam, open het tabblad Berichten en controleer het tijdsverschil tussen verzonden en teruggestuurde berichten met en zonder beperking van de bandbreedte. Bijvoorbeeld:

Simuleer trage netwerkverbindingen vanuit het tabblad Netwerkcondities.

Als u de netwerkverbinding wilt beperken tijdens het werken in andere DevTools-panelen, gebruikt u het menu 'Netwerkvoorwaarden' .

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

Browsercookies handmatig wissen

Om browsercookies op elk gewenst moment handmatig te verwijderen, klikt u met de rechtermuisknop ergens in de tabel 'Verzoeken' en selecteert u 'Browsercookies verwijderen' .

HTTP-antwoordheaders overschrijven

Zie 'Bestanden en HTTP-antwoordheaders lokaal overschrijven' .

De gebruikersagent overschrijven

Om de user agent handmatig te overschrijven:

1. Klik op de pictogram om het menu Netwerkcondities te openen.
2. Automatisch de selectie wissen.
3. Kies een user agent-optie uit het menu of voer een aangepaste optie in het vak in.

Zoekopdrachten

Om te zoeken in requestheaders, payloads en responses:

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 in het tabblad Zoeken uw zoekopdracht in en druk op Enter . U kunt eventueel op match_case of regular_expression klikken om respectievelijk hoofdlettergevoeligheid of reguliere expressies in te schakelen.

3. Klik op een van de zoekresultaten. In het paneel 'Netwerk' wordt het overeenkomende verzoek geel gemarkeerd. Daarnaast wordt in het paneel ook het tabblad 'Headers' of 'Reactie' geopend, waarin de overeenkomende tekenreeks (indien aanwezig) wordt gemarkeerd.

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

Voor meer informatie over alle zoekmogelijkheden in DevTools, zie Zoeken: Tekst zoeken in alle geladen resources .

Filterverzoeken

Filter verzoeken op basis van eigenschappen

Gebruik het filtervak ​​om verzoeken te filteren op eigenschappen zoals het domein of de grootte van het verzoek.

Als je het vakje niet ziet, is de filterbalk waarschijnlijk verborgen. Zie Filterbalk verbergen .

Om uw filter om te keren, vinkt u het selectievakje ' Omkeren ' naast het filtervak ​​aan.

Je kunt meerdere eigenschappen tegelijk gebruiken door ze met een spatie te scheiden. Bijvoorbeeld: mime-type:image/gif larger-than:1K toont alle GIF's die groter zijn dan één kilobyte. Deze filters met meerdere eigenschappen zijn equivalent aan AND-bewerkingen. OR-bewerkingen worden niet ondersteund.

Hieronder volgt een complete lijst met ondersteunde eigenschappen.

• cookie-domain . Toon de bronnen die een specifiek cookie-domein instellen.
• cookie-name . Toon de bronnen die een specifieke cookie-naam instellen.
• cookie-path . Toon de bronnen die een specifiek cookiepad instellen.
• cookie-value . Toon de bronnen die een specifieke cookie-waarde instellen.
• domain . Toon alleen bronnen van het opgegeven domein. U kunt een jokerteken ( * ) gebruiken om meerdere domeinen op te nemen. *.com toont bijvoorbeeld bronnen van alle domeinnamen die eindigen op .com . DevTools vult het vervolgkeuzemenu voor automatisch aanvullen met alle domeinen die het is tegengekomen.
• 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 verzoektabel.
• has-response-header . Toon de resources die de opgegeven HTTP-antwoordheader bevatten. DevTools vult de autocomplete-dropdown met alle antwoordheaders die het is tegengekomen.
• is . Gebruik is:running om WebSocket bronnen te vinden.
• larger-than . Toon resources 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 . Toon bronnen die zijn opgehaald via een specifiek HTTP-methodetype. DevTools vult de vervolgkeuzelijst voor automatisch aanvullen met alle HTTP-methoden die het is tegengekomen.
• mime-type . Toon resources van een specifiek 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 weergegeven bronnen ( mixed-content:displayed ).
• priority . Toon resources waarvan het prioriteitsniveau overeenkomt met de opgegeven waarde.
• resource-type . Toon resources van een bepaald resourcetype, bijvoorbeeld image. DevTools vult de autocomplete-dropdown met alle resourcetypes die het is tegengekomen.
• response-header-set-cookie . Toon onbewerkte Set-Cookie-headers in het tabblad Problemen. Onjuist opgemaakte cookies met incorrecte Set-Cookie headers worden gemarkeerd in het netwerkpaneel.
• scheme . Toon bronnen die zijn opgehaald via onbeveiligde HTTP ( scheme:http ) of beveiligde HTTPS ( scheme:https ).
• set-cookie-domain . Toon de resources die een Set-Cookie header hebben met een Domain attribuut dat overeenkomt met de opgegeven waarde. DevTools vult de autocomplete met alle cookiedomeinen die het is tegengekomen.
• set-cookie-name . Toon de resources die een Set-Cookie header hebben met een naam die overeenkomt met de opgegeven waarde. DevTools vult de autocomplete met alle cookienamen die het is tegengekomen.
• set-cookie-value . Toon de resources die een Set-Cookie header hebben met een waarde die overeenkomt met de opgegeven waarde. DevTools vult de autocomplete met alle cookie-waarden die het is tegengekomen.
• status-code . Toon alleen resources waarvan de HTTP-statuscode overeenkomt met de opgegeven code. DevTools vult het vervolgkeuzemenu voor automatisch aanvullen met alle statuscodes die het is tegengekomen.
• url . Toon de bronnen met een url die overeenkomt met de opgegeven waarde.

Filter verzoeken op type

Om verzoeken te filteren op brontype, klikt u op de knoppen Alles , Fetch/XHR , JS , CSS , Img , Media , Font , Doc , WS (WebSocket), Wasm (WebAssembly), Manifest of Overig (elk ander type dat hier niet wordt vermeld) in het netwerkpaneel .

Als u deze knoppen niet ziet, is de actiebalk ' Filters' 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 meerdere typefilters.

Filter verzoeken op tijd

Sleep op de tijdlijn van het overzicht naar links of rechts om alleen de aanvragen weer te geven die actief waren gedurende die periode. Het filter is inclusief. Elke aanvraag die actief was tijdens de geselecteerde periode wordt weergegeven.

Verberg data-URL's

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

Om deze verzoeken te verbergen, selecteert u in de actiebalk Filters de optie Meer filters > vink het vakje Gegevens-URL's verbergen aan .

De statusbalk onderaan toont het aantal weergegeven verzoeken ten opzichte van het totaal.

Verberg extensie-URL's

Om je te concentreren op de code die je zelf schrijft, kun je irrelevante verzoeken filteren die afkomstig zijn van extensies die je mogelijk in Chrome hebt geïnstalleerd. Verzoeken van extensies hebben URL's die beginnen met chrome-extension:// .

Om extensieverzoeken te verbergen, selecteer je in de actiebalk Filters de optie Meer filters > vinkje bij Extensie-URL's verbergen .

De statusbalk onderaan toont het aantal weergegeven verzoeken ten opzichte van het totaal.

Toon alleen de verzoeken met geblokkeerde antwoordcookies

Om alles te filteren behalve de verzoeken waarbij de responscookies om welke reden dan ook zijn geblokkeerd, selecteert u in de actiebalk ' Filters ' de optie 'Meer filters' > vink het vakje ' Geblokkeerde responscookies' aan.

De statusbalk onderaan toont het aantal weergegeven verzoeken ten opzichte van het totaal.

Om te achterhalen waarom een ​​responscookie is geblokkeerd, selecteer je het verzoek, open je het tabblad Cookies en beweeg je de muis over het informatiepictogram .

Daarnaast toont het netwerkpaneel een waarschuwingspictogram naast een verzoek waarbij cookies zijn geblokkeerd vanwege Chrome-instellingen 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.

Toon alleen geblokkeerde verzoeken

Om alles behalve geblokkeerde verzoeken te filteren, selecteer je in de actiebalk Filters de optie Meer filters > vinkje bij Geblokkeerde verzoeken . Om dit te testen, kun je het tabblad Netwerkverzoeken blokkeren in het zijmenu gebruiken.

In de tabel 'Verzoeken' worden geblokkeerde verzoeken in het rood weergegeven. De statusbalk onderaan toont het aantal weergegeven verzoeken ten opzichte van het totaal.

Toon alleen verzoeken van derden

Om alle verzoeken behalve de verzoeken met een oorsprong die verschilt van de pagina-oorsprong te filteren, selecteert u in de actiebalk Filters de optie Meer filters > selectievakje Verzoeken van derden .

De statusbalk onderaan toont het aantal weergegeven verzoeken ten opzichte van het totaal.

Sorteerverzoeken

Standaard worden de verzoeken in de tabel 'Verzoeken ' gesorteerd op aanvangstijd, maar u kunt de tabel ook sorteren op andere criteria.

Sorteren op kolom

Klik op de kop van een kolom in de tabel 'Aanvragen ' om de aanvragen op die kolom te sorteren.

Sorteren op activiteitsfase

Om de sorteervolgorde van aanvragen in Waterfall te wijzigen, klikt u met de rechtermuisknop op de koptekst van de tabel Aanvragen, beweegt u de muis over Waterfall en selecteert u een van de volgende opties:

• Starttijd . Het eerste verzoek dat werd ingediend, staat bovenaan.
• Reactietijd . Het eerste verzoek dat is gestart met downloaden staat bovenaan.
• Eindtijd . Het eerste voltooide verzoek staat bovenaan.
• Totale duur . Het verzoek met de kortste verbindingsopbouw en de snelste aanvraag/antwoordtijd staat bovenaan.
• Latentie . Het verzoek dat het kortst op een reactie heeft gewacht, staat bovenaan.

Deze beschrijvingen gaan ervan uit dat elke optie van kortst naar langst is gerangschikt. Door op de kop van de kolom ' Waterval ' te klikken, wordt de volgorde omgekeerd.

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

Analyseer verzoeken

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

Bekijk een logboek van aanvragen

Gebruik de tabel 'Verzoeken' om een ​​overzicht te bekijken van alle verzoeken die zijn gedaan terwijl DevTools geopend was. Door op verzoeken te klikken of er met de muis overheen te bewegen, wordt meer informatie over die verzoeken weergegeven.

De tabel 'Aanvragen' toont standaard de volgende kolommen:

• Naam . De bestandsnaam van, of een identificatiecode voor, de bron.

• Status . Deze kolom kan de volgende waarden weergeven:

  

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

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

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

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

• Grootte . De gecombineerde grootte van de responseheaders plus de responsebody, zoals deze door de server wordt geleverd.

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

• Watervaldiagram . Een visuele weergave van de activiteit van elk verzoek.

Kolommen toevoegen of verwijderen

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

U kunt de volgende extra kolommen toevoegen of verwijderen: Pad , URL , Methode , Protocol , Schema , Domein , Extern adres , Externe adresruimte , Initiërende adresruimte , 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 'Verzoeken' en selecteer 'Antwoordkopteksten' > 'Koptekstkolommen beheren' .
2. Klik in het dialoogvenster op 'Aangepaste koptekst toevoegen' , voer de naam in en klik op 'Toevoegen' .

Groepeer verzoeken per inline-frame.

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

Om verzoeken te groeperen op iframes, opent u Instellingen. Ga naar het paneel Netwerk en vink het selectievakje Groeperen op frame aan.

Om een ​​verzoek te bekijken dat is geïnitieerd door een inline frame, vouwt u het uit in het verzoeklogboek.

Bekijk de timing van de verzoeken ten opzichte van elkaar.

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

Zie Sorteren op activiteitsfase om de verschillende manieren te bekijken waarop je de waterval kunt sorteren.

Analyseer de berichten van een WebSocket-verbinding

Om de berichten van een WebSocket-verbinding te bekijken:

1. Klik in 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 in de kolom ' Naam' van de tabel ' Verzoeken '.

De tabel bevat drie kolommen:

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

Berichten zijn kleurgecodeerd op basis van hun type:

• Uitgaande sms-berichten zijn lichtgroen.
• Inkomende sms-berichten zijn wit.
• WebSocket-opcodes zijn lichtgeel.
• Fouten worden lichtrood weergegeven.

Analyseer gebeurtenissen in een stream

Om de gebeurtenissen te bekijken die servers streamen via de Fetch API , EventSource API en XHR:

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

Om gebeurtenissen te filteren, geeft u een reguliere expressie op in de filterbalk bovenaan het tabblad Gebeurtenisstroom .

Om de lijst met vastgelegde gebeurtenissen te wissen, klikt u op het blok Wissen .

Bekijk een voorbeeld van een antwoordtekst

Om een ​​voorbeeld van een antwoordtekst te bekijken:

1. Klik op de URL van het verzoek in de kolom 'Naam' van de tabel ' Verzoeken '.
2. Klik op het tabblad Voorbeeld .

Dit tabblad is vooral handig voor het bekijken van afbeeldingen.

Een antwoordtekst bekijken

Om de reactie op een verzoek te bekijken:

1. Klik op de URL van het verzoek in de kolom 'Naam' van de tabel 'Verzoeken'.
2. Klik op het tabblad 'Reactie' .

HTTP-headers bekijken

Om de HTTP-headergegevens van een verzoek te bekijken:

1. Klik op een verzoek in de tabel Verzoeken .
2. Open het tabblad Headers en scroll naar beneden naar de secties General , Response Headers , Request Headers en, optioneel, Early Hints Headers .

In het gedeelte 'Algemeen ' toont DevTools een leesbare statusmelding naast de ontvangen HTTP-statuscode.

In het gedeelte 'Response Headers' kunt u met de muis over een headerwaarde bewegen en op de knop 'Bewerken ' klikken om de responseheader lokaal te overschrijven .

HTTP-headerbron bekijken

Standaard worden de headernamen op het tabblad Headers alfabetisch weergegeven. Om de HTTP-headernamen in de volgorde van ontvangst te bekijken:

1. Open het tabblad Headers voor het verzoek waarin u geïnteresseerd bent. Zie HTTP-headers bekijken .
2. Klik op 'Broncode bekijken ' naast het gedeelte 'Aanvraagheader' of 'Antwoordheader' .

Waarschuwing voor voorlopige headers

Soms verschijnt op het tabblad 'Headers' de waarschuwing Provisional headers are shown... . Dit kan verschillende oorzaken hebben:

• Het verzoek werd niet via het netwerk verzonden, maar werd vanuit een lokale cache verwerkt. Deze cache bewaart niet de oorspronkelijke verzoekheaders. In dit geval kunt u caching uitschakelen om de volledige verzoekheaders te bekijken.

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

Om veiligheidsredenen kan DevTools ook alleen voorlopige headers weergeven.

Bekijk de payload van het verzoek

Om de payload van een verzoek te bekijken, dat wil zeggen de query-stringparameters en formuliergegevens, selecteert u een verzoek in de tabel Verzoeken en opent u het tabblad Payload .

Payloadbron bekijken

Standaard toont DevTools de payload in een voor mensen leesbare vorm.

Om de bronnen van query-stringparameters en formuliergegevens te bekijken, klikt u op het tabblad Payload op ' Bron bekijken' naast de secties 'Query-stringparameters' of 'Formuliergegevens' .

Bekijk de URL-gedecodeerde argumenten van query-stringparameters

Om URL-codering voor argumenten in of uit te schakelen, klikt u op het tabblad Payload op 'Gedecodeerd weergeven' of 'URL-gecodeerd weergeven' .

Cookies bekijken

Om de cookies te bekijken die in de HTTP-header van een verzoek zijn verzonden:

1. Klik op de URL van het verzoek in de kolom 'Naam' van de tabel 'Verzoeken'.
2. Klik op het tabblad Cookies .

Voor een beschrijving van elk van de kolommen, zie Velden .

Om cookies aan te passen, raadpleegt u Cookies bekijken, bewerken en verwijderen .

Bekijk de tijdsverdeling van een verzoek.

Om de tijdsverdeling van een verzoek te bekijken:

1. Klik op de URL van het verzoek in de kolom 'Naam' van de tabel ' Verzoeken '.
2. Klik op het tabblad Timing .

Bekijk de preview met een tijdsoverzicht voor een snellere manier om toegang te krijgen tot deze gegevens.

Zie 'Uitleg van de fasen van de tijdsindeling' voor meer informatie over elk van de fasen die u mogelijk in het tabblad 'Timing' ziet.

Bekijk een overzicht van de tijdsplanning

Om een ​​voorbeeld van de tijdsverdeling van een verzoek te bekijken, beweegt u de muis over de vermelding van het verzoek in de kolom 'Waterval' van de tabel 'Verzoeken'.

Zie ' De timing van een verzoek bekijken' voor een manier om toegang te krijgen tot deze gegevens zonder de muis eroverheen te hoeven bewegen.

Uitleg over de fasen van de timingonderbreking

Hieronder vindt u meer informatie over elk van de fasen die u mogelijk in het tabblad 'Timing' ziet:

• Wachtrij . De browser plaatst verzoeken in de wachtrij voordat de verbinding tot stand komt 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 ervan binnen het document. Lees voor meer informatie het gedeelte over bronprioriteit in de fetchpriority handleiding.
  • Er zijn al zes TCP-verbindingen open voor deze oorsprong, wat de limiet is. (Dit geldt alleen voor HTTP/1.0 en HTTP/1.1.)
  • De browser reserveert tijdelijk ruimte in de schijfcache.
• Vastgelopen . Het verzoek kan na het tot stand brengen van de verbinding vastgelopen zijn om een ​​van de redenen die worden beschreven in Wachtrijen .
• DNS-lookup . De browser lost het IP-adres van het verzoek op.
• Eerste verbinding . De browser legt een verbinding tot stand, inclusief TCP-handshakes of herhaalpogingen en het onderhandelen over een SSL-certificaat.
• Proxy-onderhandeling . De browser onderhandelt over het verzoek met een proxyserver .
• Verzoek verzonden . Het verzoek wordt verzonden.
• ServiceWorker-voorbereiding . De browser start de serviceworker op.
• Verzoek aan ServiceWorker . Het verzoek wordt naar de service worker verzonden.
• Wachten (TTFB) . De browser wacht op de eerste byte van een reactie. TTFB staat voor Time To First Byte (tijd tot de eerste byte). Deze timing omvat één retourvertraging en de tijd die de server nodig had om de reactie voor te bereiden.
• Inhoud downloaden . De browser ontvangt het antwoord, direct van het netwerk of van een service worker. Deze waarde geeft de totale tijd weer die is besteed aan het lezen van de antwoordinhoud. Hogere waarden dan verwacht kunnen duiden op een traag netwerk of dat de browser bezig is met andere taken die het lezen van het antwoord vertragen.

Bekijk initiators en afhankelijkheden

Om de initiators en afhankelijkheden van een verzoek te bekijken, houdt u Shift ingedrukt en beweegt u de muis over het verzoek in de tabel Verzoeken. DevTools kleurt initiators groen en afhankelijkheden rood.

Wanneer de tabel met verzoeken chronologisch is gesorteerd, is het eerste groene verzoek boven het verzoek waar u met de muis overheen beweegt de initiatiefnemer van de afhankelijkheid. Als er nog een groen verzoek boven staat, is dat verzoek de initiatiefnemer van de initiatiefnemer. Enzovoort.

Laadgebeurtenissen bekijken

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

Bekijk het totale aantal aanvragen

Het totale aantal verzoeken wordt weergegeven in de statusbalk onderaan het netwerkpaneel .

Let op: Dit aantal registreert alleen verzoeken die zijn vastgelegd sinds DevTools is geopend. Andere verzoeken die vóór het openen van DevTools hebben plaatsgevonden, worden niet meegeteld.

Bekijk de totale grootte van de overgedragen en geladen resources.

DevTools toont de totale grootte van de overgedragen en geladen (niet-gecomprimeerde) resources in de statusbalk onderaan het netwerkpaneel .

Let op: Dit aantal registreert alleen verzoeken die zijn vastgelegd sinds DevTools is geopend. Andere verzoeken die vóór het openen van DevTools hebben plaatsgevonden, worden niet meegeteld.

Zie ' De ongecomprimeerde grootte van een bron bekijken' om te zien hoe groot bronnen zijn nadat de browser ze heeft gedecomprimeerd.

Bekijk de stacktrace die een verzoek heeft veroorzaakt.

Wanneer een JavaScript-instructie een resource opvraagt, beweeg dan de muis over de kolom 'Initiator' om de stacktrace te bekijken die tot de aanvraag heeft geleid.

Bekijk de ongecomprimeerde grootte van een bron.

Controleer de instellingen > Grote aanvraagrijen en kijk vervolgens naar de onderste waarde in de kolom 'Grootte' .

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

Exporteer verzoekgegevens

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

Sla alle netwerkverzoeken op in een HAR-bestand.

HAR (HTTP Archive) is een bestandsformaat dat door verschillende HTTP-sessietools wordt gebruikt om vastgelegde gegevens te exporteren. Het formaat is een JSON-object met een specifieke set velden.

Om de kans op onbedoelde datalekken van gevoelige informatie te verkleinen, kunt u standaard het 'gezuiverde' netwerklogboek exporteren in HAR-formaat, waarbij gevoelige informatie zoals Cookie , Set-Cookie en Authorization worden uitgesloten. Indien nodig kunt u het logboek ook exporteren mét gevoelige gegevens.

Om alle netwerkverzoeken in een HAR-bestand op te slaan, kunt u een van de volgende twee methoden kiezen:

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

  

• Klik op 'Download Export HAR (sanitized)...' in de actiebalk bovenaan het netwerkpaneel .

  Om te exporteren met gevoelige gegevens, moet u eerst de instellingen inschakelen: Instellingen > Voorkeuren > Netwerk > vink het vakje 'HAR genereren met gevoelige gegevens toestaan' aan , klik vervolgens op de knop 'Exporteren' en selecteer ' HAR exporteren (met gevoelige gegevens)' in het下拉菜单.

  

Zodra je een HAR-bestand hebt, kun je het op twee manieren weer importeren in DevTools voor analyse :

• Sleep het HAR-bestand naar de tabel 'Aanvragen' .
• Klik op 'Uploaden' > 'HAR importeren' in de actiebalk bovenaan het netwerkpaneel .

Opmerking: Het netwerkpaneel leest en toont de initiators van de verzoeken die uit HAR-bestanden zijn geïmporteerd.

Kopieer een verzoek, een gefilterde set verzoeken of alle verzoeken naar het klembord.

Klik in de tabel 'Aanvragen' in de kolom 'Naam' met de rechtermuisknop op een aanvraag, ga met de muis over 'Kopiëren ' en selecteer een van de volgende opties.

Om een ​​enkel verzoek, het antwoord daarop of de stacktrace te kopiëren:

• URL kopiëren . Kopieer de URL van het verzoek naar het klembord.
• Kopieer als cURL . Kopieer het verzoek als een cURL-opdracht.
• Kopiëren als PowerShell . Kopieer het verzoek als een PowerShell-opdracht.
• Kopieer als fetch . Kopieer het verzoek als een fetch-aanroep.
• Kopieer als fetch (Node.js) . Kopieer het verzoek als een Node.js fetch-aanroep.
• Reactie kopiëren . Kopieer de reactie naar het klembord.
• Kopieer de stacktrace . Kopieer de stacktrace van het verzoek naar het klembord.

Om alle verzoeken te kopiëren:

• Kopieer alle URL's . Kopieer de URL's van alle verzoeken naar het klembord.
• Kopieer alles als een cURL-reeks . Kopieer alle verzoeken als een reeks cURL-opdrachten.
• Kopieer alles als PowerShell . Kopieer alle verzoeken als een reeks PowerShell-opdrachten.
• Kopieer alles als een fetch-aanroep . Kopieer alle verzoeken als een reeks fetch-aanroepen.
• Kopieer alle verzoeken als een reeks Node.js fetch-aanroepen.
• Kopieer alles als HAR (gesanonimiseerd) . Kopieer alle verzoeken als HAR-gegevens zonder gevoelige gegevens zoals Cookie , Set-Cookie en Authorization headers.
• Kopieer alles als HAR (inclusief gevoelige gegevens) . Kopieer alle verzoeken als HAR-gegevens inclusief gevoelige gegevens.

Om een ​​gefilterde set verzoeken te kopiëren, past u een filter toe op het netwerklogboek, klikt u met de rechtermuisknop op een verzoek en selecteert u:

• Kopieer alle vermelde URL's . Kopieer de URL's van alle gefilterde verzoeken naar het klembord.
• Kopieer alle vermelde cURL-verzoeken . Kopieer alle gefilterde verzoeken als een reeks cURL-opdrachten.
• Kopieer alles wat als PowerShell wordt weergegeven . Kopieer alle gefilterde verzoeken als een reeks PowerShell-opdrachten.
• Kopieer alle items die als 'fetch' worden weergegeven . Kopieer alle gefilterde verzoeken als een reeks 'fetch'-aanroepen.
• Kopieer alle vermelde fetch-verzoeken (Node.js) . Kopieer alle gefilterde verzoeken als een reeks Node.js fetch-aanroepen.
• Kopieer alle vermelde gegevens als HAR (gesanonimiseerd) . Kopieer alle gefilterde verzoeken als HAR-gegevens zonder gevoelige gegevens zoals Cookie , Set-Cookie en Authorization headers.
• Kopieer alle items die als HAR (met gevoelige gegevens) zijn gemarkeerd . Kopieer alle gefilterde verzoeken als HAR-gegevens met gevoelige gegevens.

Wijzig de lay-out van het netwerkpaneel.

Vouw secties van de gebruikersinterface van het netwerkpaneel uit of in om u te concentreren op wat voor u belangrijk is.

Verberg de actiebalk Filters

Standaard toont DevTools de filterbalk bovenaan het netwerkpaneel . Klik op filter_alt Filter om deze te verbergen.

Gebruik grote aanvraagrijen

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

Open instellingen Klik op 'Grote aanvraagrijen' om grote rijen te bekijken.

Verberg het overzichtspoor

Standaard toont DevTools het overzichtsspoor . Open Instellingen en schakel het selectievakje 'Overzicht weergeven' uit om het te verbergen.