Elements: live inspecteren en bewerken
De levende DOM-boom van de pagina met berekende stijlen, overerving en boxmodel. Wijzig een waarde en het toestel tekent direct opnieuw: de snelste weg naar een mobiele opmaakfout.
Debug webpagina’s op je telefoon vanaf je computer
Net als F12 in je eigen browser, maar dan op pagina’s die op een echte iPhone of Android draaien: browsertabbladen of de WebView / H5 in een app. Elementen inspecteren, consolefouten, breakpoints, netwerkverzoeken, cookies en local storage.
- Verzoeken uit app-WebViews
- Verzoeken van de telefoonbrowser
- Schermbeeld naast de panelen
- Zonder app-rebuild
Mobiel webdebuggen, zonder de gebruikelijke omweg
Alles hieronder is een gewone dag debuggen op een telefoon. De linkerkolom is hoe het meestal gaat.
| Wat je wilt doen | De gebruikelijke manier | Met de web-inspector |
|---|---|---|
| De opmaak gaat alleen op de telefoon stuk | De fix gokken, opnieuw bouwen, uitrollen, weer kijken | Element en CSS live aanpassen en het toestel meteen zien bijwerken |
| Wit scherm of een knop die niets doet | Geen console op een telefoon, dus alerts en logs erin | Consolefouten en logs precies zoals de pagina ze gaf |
| Uitzoeken welke regel JavaScript een verzoek afvuurde | Een opname toont het verzoek, nooit de aanroeper | Breakpoints en stap-voor-stap in Sources, met de variabelen erbij |
| Zien wat er echt in cookies en localStorage staat | Afleiden uit de request-headers | Volledige tabellen — naam, waarde, domein, vervaldatum, Secure, HttpOnly, SameSite — en bewerkbaar |
| Een H5-pagina in een app debuggen | Bedolven onder het verkeer, zonder manier om aan te haken | Gegroepeerd onder de app die hem bevat: kiezen en debuggen als elke andere pagina |
| Debuggen op afstand überhaupt aan de praat krijgen | Per platform andere schakelaars, verstopte ingangen, priegelstappen | Eén venster: toestel kiezen, pagina kiezen, op Debuggen klikken |
| Verkeer en paginastatus samen bekijken | Een opnametool en een debugger, naast elkaar en los van elkaar | Allebei in één tool: het ontsleutelde verzoek en de code die het verstuurde |
Echte ontwikkelaarstools, gericht op het toestel
Geen uitgeklede viewer, maar dezelfde panelen die je op je computer gebruikt — gekoppeld aan de pagina op de telefoon.
Console: fouten en een live REPL
Elke fout en elke log die de pagina maakte, plus een prompt die jouw JavaScript uitvoert in díé pagina op dát toestel. Debuggen met alert() is verleden tijd.
Sources: breakpoints en stap-voor-stap
Blader door de geladen scripts en stylesheets, zet breakpoints, loop de aanroepstack door en bekijk de variabelen op het moment dat het misgaat.
Network: elk verzoek als waterval
Status, type, initiator, grootte, timing en cachestatus per verzoek, met totalen voor verzoeken, overgedragen bytes, DOMContentLoaded en de volledige laadtijd.
Storage: cookies, local en session
Cookies gegroepeerd per domein met vervaldatum, Secure, HttpOnly en SameSite, naast localStorage en sessionStorage — het snelst om een inlogprobleem te ontrafelen.
Het scherm van het toestel op jouw scherm
Op Android wordt de live pagina naast de panelen gespiegeld en kun je met de muis klikken en scrollen: inspecteren en bedienen op één scherm, zonder te wisselen tussen telefoon en toetsenbord.
Hoe het eruitziet
Echte sessies op een echte telefoon — niets in scène gezet.
Wat je kunt debuggen
Telefoons, tablets, emulators en simulators, plus een browser op je eigen machine.
| Deze computer | iOS | Android | |
|---|---|---|---|
| Browsertabs | ✓ | ✓ | ✓ |
| Pagina’s in apps (WebView / WKWebView / H5) | ✓ | ✓ | ✓ |
| Emulator / simulator | — | ✓ | ✓ |
| Elementen en stijlen live inspecteren en bewerken | ✓ | ✓ | ✓ |
| Console, breakpoints en stap-voor-stap | ✓ | ✓ | ✓ |
| Netwerkwaterval voor de pagina | ✓ | ✓ | ✓ |
| Cookies / localStorage / sessionStorage | ✓ | ✓ | ✓ |
| Schermbeeld van het toestel naast de panelen | — | — | ✓ |
| Geen certificaat en geen proxy nodig | ✓ | ✓ | ✓ |
De voorbereiding, één keer te doen
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 en laat het toestel ontgrendeld. Voor Safari: Instellingen → Safari → Geavanceerd → Webinspector aanzetten; voor Chrome: Chrome-instellingen → Inhoudsinstellingen → Webinspector.
Android-toestel
Sluit de kabel aan en zet USB-foutopsporing aan bij de ontwikkelaarsopties. Emulators worden meestal ook zonder kabel gevonden.
Browser op deze computer
Start Chrome of Edge met --remote-debugging-port=9222 en klik daarna op Vernieuwen in de paginalijst.
Ook een pagina in een app? Nog één ding
Sla dit over als je alleen browsertabbladen nodig hebt. Je eigen app: roep op Android één keer setWebContentsDebuggingEnabled(true) aan; vanaf iOS 16.4 zet je isInspectable = true op de WKWebView. Een app van iemand anders, of zonder de code aan te raken: vink “Ook pagina’s in apps opnemen” aan en de pagina’s van geopende apps komen er ook in te staan — Android moet geroot zijn en op iOS werkt het alleen bij apps met een ontwikkelaarshandtekening.
Daarna is elke sessie alleen nog dit
Nieuwe opname → doel (Deze computer / iOS / Android) → methode “Webinspector” → Vernieuwen → kies de pagina → Inspect. In je browser openen volwaardige ontwikkelaarstools; open er zoveel je wilt, naast elkaar.
Ook de pagina’s die in apps verstopt zitten
De meeste apps zijn half native, half web. In die ingebedde H5-pagina’s zitten de vervelende bugs — en juist daar geeft gewone gereedschap je niets.
Gegroepeerd per app
De paginalijst is per app geordend, dus je ziet in één oogopslag het verschil tussen een afrekenpagina in de app en een browsertab, en haakt precies aan bij de juiste.
Eén vinkje
«Ook pagina’s in apps meenemen» voegt de pagina’s van op dat moment geopende apps toe aan de lijst. Vinkje eruit en je hebt weer alleen browsertabs.
Er blijft niets achter
Je bouwt de app niet opnieuw, ondertekent niets en installeert geen hulpprogramma op het toestel. Na de sessie is het toestel weer zoals het was.
Combineert met verkeersopname
Debug hier de pagina en neem in dezelfde tool het verkeer van diezelfde app op: ontsleuteld HTTPS, ook bij apps met certificate pinning of apps die de systeemproxy negeren.
Mobiel webdebuggen: veelgestelde vragen
Hoe inspecteer ik een element op een telefoon?
Verbind de telefoon via USB met je computer, open Trace Eagle, kies Nieuwe opname → iOS of Android → methode «Web-inspector», selecteer de pagina en klik op Debuggen. Op je computer opent een volledig Elements-paneel met de live DOM en CSS van de pagina op het toestel; pas je daar een waarde aan, dan verandert de pagina op de telefoon meteen.
Kan ik een Android-WebView debuggen zonder de app aan te passen?
Ja. WebViews die debuggen al toestaan verschijnen meteen in de lijst. Voor apps die dat niet doen vink je «Ook pagina’s in apps meenemen» aan en komen de pagina’s van geopende apps erbij — daarvoor is een geroot toestel nodig, maar er wordt niets herbouwd, herverpakt of blijvend geïnstalleerd.
Hoe debug ik een webpagina op een iPhone of iPad?
Sluit het toestel aan, ontgrendel het en zet Instellingen → Safari → Geavanceerd → Webinspector aan (of Chrome-instellingen → Inhoudsinstellingen → Webinspector). Kies daarna toestel en pagina in Trace Eagle en klik op Debuggen: de volledige webinspector opent in de browser op je computer, met Elements, Console, Sources, Network, Storage, Layers en meer.
Is dit hetzelfde als chrome://inspect?
Het dekt dezelfde klus en meer, in één venster. De ingebouwde pagina voor debuggen op afstand kent alleen Chromium-doelen op Android; hier staan iOS, Android en je lokale browser in dezelfde keuzelijst, zijn pagina’s per app gegroepeerd, komen ingebedde H5-pagina’s er met een vinkje bij, en ligt er een opnametool naast die het HTTPS-verkeer van diezelfde app ontsleutelt.
Heb ik een jailbreak of root nodig?
Voor gewoon debuggen niet: browsertabs en apps die het toch al toestaan werken op een standaardtoestel. Alleen de extra optie die pagina’s uit apps van derden toevoegt vraagt om een geroot Android-toestel; op iOS bepaalt het systeem welke apps meekunnen.
Is er een certificaat, proxy of SDK in de app nodig?
Geen van drieën. Webdebuggen op afstand loopt via de USB-verbinding: geen proxy instellen, geen rootcertificaat op het toestel en geen SDK of bibliotheek in de app.
Wat is het verschil met verkeersopname?
De opname beantwoordt wat er over het netwerk ging: verzoek, antwoord, headers en body, ontsleuteld. De web-inspector beantwoordt wat de pagina deed: de DOM, de stijlen, consolefouten, welk script het verzoek afvuurde en wat er al in cookies en opslag stond. Trace Eagle heeft beide, dus je stapt over zonder van tool te wisselen.
In welke browser opent het debugvenster?
Sessies voor Android en de lokale browser openen in Chrome, Edge of Brave (Trace Eagle start er zelf een); iOS-sessies werken in elke browser.
Werkt het met emulators en simulators?
Ja. Android-emulators worden meestal zonder kabel herkend, en iOS-simulators op dezelfde machine ook — de werkwijze is identiek aan die met een fysiek toestel.
Is de web-inspector gratis?
Ja. Net als de rest van Trace Eagle is hij volledig gratis op macOS, Windows en Linux, zonder betaalde functies.