Web-inspector

Een layout die alleen op de telefoon breekt, een knop die niets doet, een H5-pagina die wit blijft — op de computer druk je op F12 en zie je meteen waarom. Op de telefoon blijft meestal alleen over: alert’s toevoegen, opnieuw bouwen, en nog eens kijken. De web-inspector koppelt diezelfde ontwikkelaarstools aan de echte pagina op het toestel: kabel erin, en Elements, Console, Sources, Network en Storage openen op je computer, met het toestel dat meteen opnieuw tekent zodra je een waarde wijzigt.

Web-inspector die een Android-pagina debugt: links het live schermbeeld van het toestel, rechts het Elements-paneel met de toegepaste stijlen

1. Hoe dit zich verhoudt tot packet capture

Je hebt beide nodig, maar ze beantwoorden andere vragen:

	Packet capture	Web-inspector
Beantwoordt	Wat er over het netwerk ging	Wat de pagina deed
Toont	Verzoeken / antwoorden, headers, body (ontsleuteld)	DOM-boom, toegepaste stijlen, consolefouten, call stacks, cookies en storage
Typische vraag	Wat geeft dit endpoint terug, kloppen de parameters	Welke regel JavaScript stuurde dit verzoek, waarom werkt deze stijl niet

Capture toont het verzoek, maar nooit wie het veroorzaakte; de inspector zet een breakpoint in Sources en leidt je terug naar precies die regel. Beide zitten in dezelfde tool, dus wisselen kost niets.

2. Voorbereiding die je één keer doet

De drie blokken hieronder zijn alternatieven: doe het blok dat bij jouw doel past, en dat maar één keer.

iOS-toestel

Sluit de kabel aan, laat het toestel ontgrendeld, en zet de webinspector-schakelaar aan:

Safari: Instellingen → Safari → Geavanceerd → Webinspector
Chrome: Chrome-instellingen → Inhoudsinstellingen → Webinspector

Deze stap wordt op iOS het vaakst vergeten. Zonder deze wordt het toestel wel gevonden, maar blijft de paginalijst leeg.

Android-toestel

Sluit de kabel aan en zet USB-foutopsporing aan bij de ontwikkelaarsopties. Android-emulators worden meestal ook zonder kabel gevonden.

Browser op deze computer

Start Chrome of Edge met --remote-debugging-port=9222, klik daarna op Vernieuwen in de paginalijst.

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

3. Ook een pagina in een app debuggen? Nog één ding

Sla dit over als je alleen browsertabbladen nodig hebt.

Je eigen app: één keer aanzetten in de code.

// Android: één keer aanroepen bij het starten van de Application of Activity
WebView.setWebContentsDebuggingEnabled(true);

// Vanaf iOS 16.4: maak de WKWebView inspecteerbaar
webView.isInspectable = true

Een app van iemand anders, of zonder de code aan te raken: vink “Ook pagina’s in apps opnemen” aan in het dialoogvenster, en de pagina’s van geopende apps komen er ook in te staan. Vink het uit, en je hebt weer alleen browsertabbladen.

	Vereiste	Opmerking
Android	Een geroot toestel	Zet WebView-debugging aan bij draaiende apps, zonder iets opnieuw te bouwen
iOS	Alleen apps met een ontwikkelaarshandtekening	Een systeembeperking — apps geïnstalleerd via de App Store kunnen niet worden opgenomen

Hoe dan ook wordt de app nooit opnieuw gebouwd, ondertekend, of wordt er een hulpprogramma op het toestel geïnstalleerd. Als de sessie eindigt, is het toestel weer zoals het was.

4. Beginnen met debuggen

Als dat gedaan is, bestaat elke sessie alleen nog uit dit:

Nieuwe opname → doel (Deze computer / iOS / Android) → methode “Webinspector” → Vernieuwen → kies de pagina → Inspect

Dialoogvenster nieuwe opname met Android en de methode Webinspector geselecteerd, met een lijst van debugbare pagina’s na het aanvinken van “Ook pagina’s in apps opnemen”

Pagina’s staan gegroepeerd per app, zodat een pagina in een app in één oogopslag te onderscheiden is van een browsertabblad.
Klik op Inspect en volwaardige ontwikkelaarstools openen in je browser op de computer, gekoppeld aan die pagina op dat toestel.
Open er zoveel je wilt tegelijk — één venster per pagina, allemaal live naast elkaar.

5. Wat je te zien krijgt

Dezelfde panelen die je elke dag op de computer gebruikt, nu gericht op de pagina op de telefoon.

Paneel	Wat het doet
Elements	De live DOM-boom van de pagina, met toegepaste stijlen, overerving en het boxmodel. Wijzig een waarde en het toestel tekent meteen opnieuw — de snelste manier om een mobiele layoutbug te vinden
Console	Elke fout en elk logbericht dat de pagina produceerde, plus een prompt die JavaScript rechtstreeks in die pagina op dat toestel uitvoert
Sources	Blader door de scripts en stylesheets die de pagina laadde, zet breakpoints, loop de call stack door en bekijk variabelen precies op het moment dat het misgaat
Network	Elk verzoek van de pagina in een waterval: status, type, initiator, grootte, timing en cachestatus, met totalen voor verzoeken, verzonden bytes, DOMContentLoaded en de volledige laadtijd
Storage	Cookies gegroepeerd per domein met vervaldatum, Secure, HttpOnly en SameSite, naast localStorage en sessionStorage — de snelste manier om een inlogstatusbug te ontrafelen

Storage-paneel van de web-inspector: cookietabel voor een pagina die open staat op een iPhone, met waarde, domein, vervaldatum, Secure, HttpOnly en SameSite

Op Android wordt het live schermbeeld van het toestel naast de panelen gespiegeld en kun je erop klikken en scrollen met de muis — inspecteren en bedienen gebeurt op één scherm, zonder te wisselen tussen telefoon en toetsenbord.

6. Wat wordt ondersteund

	Deze computer	iOS	Android
Browsertabbladen	✓	✓	✓
Pagina’s in apps (WebView / WKWebView / H5)	✓	✓	✓
Emulator / simulator	—	✓	✓
Elementen en stijlen live inspecteren en bewerken	✓	✓	✓
Console, breakpoints en stap-voor-stap uitvoeren	✓	✓	✓
Netwerkwaterval voor de pagina	✓	✓	✓
Cookies / localStorage / sessionStorage	✓	✓	✓
Schermbeeld van het toestel naast de panelen	—	—	✓
Geen certificaat en geen proxy in te stellen	✓	✓	✓

7. Er gebeurt niets? Controleer dit eerst

Symptoom	Meestal	Wat te doen
Toestel gevonden, paginalijst leeg	Webinspector op iOS staat uit, of het scherm is vergrendeld	Volg sectie 2, zet aan, laat ontgrendeld en klik op Vernieuwen
Android toont geen pagina’s in apps	Die WebView had nooit debugging aanstaan	Je eigen app: voeg `setWebContentsDebuggingEnabled(true)` toe; app van iemand anders: vink “Ook pagina’s in apps opnemen” aan (geroot toestel nodig)
Eén specifieke iOS-app verschijnt nooit	Een systeembeperking	App Store-builds kunnen niet worden opgenomen — alleen apps met een ontwikkelaarshandtekening
De lokale browser toont geen pagina’s	Gestart zonder de debug-poort	Start Chrome / Edge opnieuw met `--remote-debugging-port=9222` en klik op Vernieuwen
Inspect doet niets	Een niet-ondersteunde browser	Sessies op Android en lokaal hebben Chrome, Edge of Brave nodig

8. Wanneer je hem gebruikt

Een bug die alleen op de telefoon optreedt: layout, tikgebieden, lettertyperendering.
Een H5-pagina blijft wit of werkt niet, en je moet consolefouten en de call stack zien.
Je wilt weten welk script een verzoek heeft gestuurd — capture alleen vertelt dat niet.
Je jaagt op een probleem met inloggen of cache en moet zien wat er echt in cookies en storage staat.
Je debugt H5 dat in een app is ingebed — gewone tools geven je hier niets.

Terug naar Aan de slag · Gerelateerd: Inspecteren en decoderen · iOS-opname · Android-opname