Netwerkverkeer bekijken

Alles uit de vorige pagina's blijft abstract tot je het zelf ziet gebeuren. Gelukkig heb je daar geen speciale software voor nodig: je browser bevat een volwaardige netwerkmonitor. Deze pagina leert je die lezen, en bereidt je voor op Wireshark, waarmee je een laag dieper kijkt.

De Network tab in DevTools

Openen

Browser	Sneltoets
Chrome / Edge (Windows, Linux)	F12 of Ctrl+Shift+I
Chrome / Edge (macOS)	Cmd+Option+I
Firefox	F12, dan tabblad Netwerk

Ga naar het tabblad Network en ververs de pagina (F5). De Network tab registreert alleen verkeer terwijl ze open staat, dus na het verversen vult de lijst zich vanzelf.

Elke regel is één request én zijn response

Dit is het centrale inzicht: één regel in de lijst is één request-responsepaar. De naam en de methode komen van het request dat jouw browser verstuurde; de status en de grootte komen uit de response die de server terugstuurde.

Kolom	Van wie komt die informatie?	Betekenis
Name	Request	Het pad van de opgevraagde bron, bv. style.css
Method	Request	GET, POST, … (kolom mogelijk eerst aanzetten via rechtermuisknop)
Status	Response	De statuscode: 200, 304, 404, 500
Type	Response	Het soort bestand: document, stylesheet, script, png
Initiator	Browser	Wat dit request uitlokte: de HTML, een script, of jijzelf
Size	Response	Hoeveel bytes er terugkwamen (disk cache als het uit de cache komt)
Time	Beide	Hoelang tussen versturen en volledig ontvangen

Klik een regel aan en het detailpaneel opent zich:

Tabblad	Wat je er ziet	Request of response?
Headers	Bovenaan de algemene gegevens (URL, methode, statuscode), daaronder Response Headers en Request Headers	Beide, duidelijk gescheiden
Payload	De data die je meestuurde (enkel bij POST, PUT, PATCH)	Request
Preview	De response in leesbare vorm (JSON uitgeklapt, afbeelding getoond)	Response
Response	De ruwe body zoals ze binnenkwam	Response
Timing	Hoelang DNS, verbinding opzetten, TLS, wachten en downloaden duurden	Beide

Doe dit nu, op je eigen pagina

Open een pagina die je zelf gebouwd hebt (of start je dev server en ga naar localhost:5173), open de Network tab en ververs.

1. Hoeveel requests vertrekken er voor die ene pagina? Onderaan staat het totaal.
2. Welk request staat bovenaan, en waarom is dat logisch? (Tip: kolom Type = document.)
3. Klik dat eerste request aan. Zoek in het tabblad Headers: welke methode gebruikte je browser, en welke statuscode kwam terug?
4. Zoek bij Request Headers de header Host, en bij Response Headers de header Content-Type. Wat zeggen ze?
5. Zoek in de lijst een request naar een afbeelding of stylesheet. Wie is de Initiator?

Wat je in stap 2 en 5 ziet, is precies stap 8 uit de reis van een URL: de HTML komt eerst binnen, en lokt daarna alle andere requests uit.

Handige instellingen

Optie	Wat het doet	Wanneer gebruiken
Disable cache	Negeer de browsercache zolang DevTools open staat	Als je zeker wil zijn dat je verse bestanden ziet
Preserve log	Wis de lijst niet bij het navigeren	Om redirects en verkeer over meerdere pagina's te volgen
Filter Fetch/XHR	Toon enkel API-verkeer	Om de requests van je eigen JavaScript-code te isoleren
Throttling	Simuleer een trage verbinding	Om te testen hoe je pagina laadt op mobiel internet

Merk het verschil op tussen 200 en 304

Ververs een tweede keer. Sommige bestanden krijgen nu status 304 Not Modified en Size: disk cache. De server zegt daarmee: "er is niets veranderd, gebruik je eigen kopie". Dat is het verschil tussen een pagina die traag en een die snel voelt.

Een laag dieper: Wireshark

De Network tab toont wat je browser doet, op applicatieniveau. Wat ze niet toont:

• verkeer van andere programma's (je mailclient, Spotify, Windows-updates);
• DNS-opzoekingen als afzonderlijke berichten;
• de TCP-handdruk (SYN, SYN-ACK, ACK);
• alles onder de applicatielaag: IP-headers, MAC-adressen, frames.

Wireshark toont dat allemaal wel. Het leest rechtstreeks mee op je netwerkkaart en toont elk pakket, laag per laag, precies zoals in het OSI-model: klik een pakket aan en je klapt het Ethernet-frame open, daarin het IP-pakket, daarin het TCP-segment, daarin het HTTP-bericht. Encapsulatie wordt daar van een schema iets dat je met je eigen ogen ziet.

Afbeelding: Wireshark User's Guide.

Huiswerk: installeer Wireshark

Installeer Wireshark voor het volgende lesmoment. We gebruiken het vanaf dan om echte pakketten te bekijken.

Besturingssysteem	Hoe
Windows	Download het installatieprogramma via wireshark.org/download. Laat Npcap mee installeren: zonder die component kan Wireshark geen verkeer opvangen.
macOS	Download het .dmg via dezelfde pagina, of installeer met brew install --cask wireshark.
Linux (Ubuntu/Debian)	sudo apt update en daarna sudo apt install wireshark. Antwoord Yes op de vraag of niet-rootgebruikers mogen meelezen, en voer daarna sudo usermod -aG wireshark $USER uit. Log opnieuw in.

Controleer je installatie: start Wireshark, kies je actieve netwerkinterface (meestal Wi-Fi of Ethernet) en klik op de blauwe haaienvin. Zie je regels binnenlopen, dan ben je klaar.

Meeluisteren mag niet zomaar

Wireshark toont al het verkeer dat langs je netwerkkaart komt. Op een netwerk dat niet van jou is (school, werk, publieke wifi) is meeluisteren zonder toestemming in veel gevallen strafbaar. Beperk je tot je eigen verkeer op je eigen netwerk, en tot wat in de les gevraagd wordt.

Test jezelf

1. In de Network tab zie je een regel met Name `users`, Status `200` en Type `fetch`. Wat is de response?

2. Je opent een pagina en ziet 34 requests in de Network tab. Wat verklaart dat?

3. Wat kan je in Wireshark zien en in de Network tab niet?

Onthoud

• De Network tab (F12) toont elk request dat je browser uitvoert; ze registreert enkel terwijl ze open staat.
• Eén regel = één request én zijn response: naam en methode van het request, status en grootte van de response.
• Het tabblad Headers scheidt request headers van response headers; Payload hoort bij het request, Preview en Response bij de response.
• Wireshark kijkt een laag dieper: DNS, TCP-handdruk, IP-headers en frames, voor al je programma's, niet enkel de browser.
• Meeluisteren op netwerken die niet van jou zijn, doe je niet.