De HTML-code van een webpagina bestaat uit de tekstuele instructies die de browser interpreteert om inhoud op het scherm weer te geven. Toegang tot deze code stelt je in staat om de structuur van een site te begrijpen, een weergavefout te diagnosticeren of de markup van een concurrent te analyseren. Er bestaan twee hoofdmethoden die naast elkaar bestaan, en ze tonen niet hetzelfde.
Bruto bron en gerenderde DOM: twee visies op de HTML-code
Wanneer een browser een pagina laadt, ontvangt hij eerst een bruto HTML-bestand dat door de server is verzonden. Dit bestand bevat de tags zoals ze aan de serverzijde zijn geschreven, voordat ze door JavaScript zijn gewijzigd.
De bruto bron kan worden bekeken via de sneltoets Ctrl + U (of Cmd + U op Mac) in de meeste browsers. De weergegeven inhoud komt exact overeen met de oorspronkelijke HTTP-respons. Op een klassieke statische site weerspiegelt deze bron nauwkeurig wat de bezoeker ziet.
Bij moderne applicaties van het type SPA (Single Page Application) is de situatie radicaal anders. De bruto bron kan bijna leeg lijken, omdat de zichtbare inhoud dynamisch door JavaScript wordt gegenereerd na de initiële laadperiode. Om de werkelijke staat van de pagina te zien zoals deze in de browser verschijnt, moet je de gerenderde DOM bekijken via de ontwikkeltools. Het begrijpen van de HTML-code van een webpagina vereist dus een onderscheid tussen deze twee lagen.
Het tabblad Elementen van de DevTools toont de DOM zoals deze bestaat na de uitvoering van alle scripts. De door JavaScript toegevoegde, gewijzigde of verwijderde knooppunten verschijnen daar in realtime. Dit uitzicht weerspiegelt wat de browser daadwerkelijk in het geheugen heeft opgebouwd, niet wat de server heeft verzonden.
Sneltoetsen om de code in elke browser weer te geven
De drie meest populaire desktopbrowsers delen vergelijkbare sneltoetsen, met enkele varianten.
- Google Chrome: Ctrl + U voor de bruto bron, F12 of Ctrl + Shift + I om de DevTools te openen op het tabblad Elementen dat de gerenderde DOM toont.
- Mozilla Firefox: dezelfde sneltoets Ctrl + U voor de bron. De ontwikkeltools worden geopend met F12. Firefox heeft onlangs specifieke gevallen van bronweergave voor blob:- en srcdoc-documenten gecorrigeerd.
- Safari: het menu Ontwikkeling moet handmatig worden ingeschakeld in de voorkeuren. Zodra het actief is, toont de sneltoets Cmd + Option + U de bron, en Cmd + Option + I opent de webinspecteur.
Een belangrijk punt om te onthouden: de sneltoets Ctrl + U toont altijd de serverbron, nooit de gewijzigde DOM. Voor het debuggen op een dynamische site blijven de DevTools de enige betrouwbare optie.
De HTML-code op mobiel bekijken met het prefix view-source
Op een Android-smartphone met Chrome is er geen sneltoets of ingebouwd menu om de bron weer te geven. De gedocumenteerde methode is om view-source: direct voor de URL in de adresbalk in te voeren.
Bijvoorbeeld, om de HTML van example.com te bekijken, hoef je alleen maar view-source:https://example.com in te voeren in Chrome mobiel. De browser toont dan de bruto code die door de server is verzonden, in een platte tekstweergave.
Deze techniek werkt ook op desktop, maar komt het meest tot zijn recht op mobiel waar de ontwikkeltools niet standaard toegankelijk zijn. Op iOS biedt Safari mobiel geen ingebouwd equivalent. Derde partij applicaties voor het inspecteren van de bron zijn beschikbaar in de App Store om dit gebrek op te vullen.
Inspecteren en tijdelijk de DOM wijzigen met de DevTools
Het tabblad Elementen van de ontwikkeltools beperkt zich niet tot het lezen van de code. Het stelt je in staat om tijdelijk elk element van de pagina direct in de browser te wijzigen.
Wijzig tekst of HTML-attributen
Een dubbele klik op een knooppunt in het tabblad Elementen maakt de inhoud bewerkbaar. De wijziging wordt onmiddellijk weerspiegeld in de weergegeven pagina. Deze wijziging blijft lokaal: een verversing van de pagina herstelt de oorspronkelijke inhoud.
Dit mechanisme wordt gebruikt om een alternatieve titel te testen, de weergave van een langere tekst te controleren, of om de verwijdering van een blok te simuleren zonder het werkelijke bronbestand aan te raken. Front-end ontwikkelaars gebruiken het dagelijks om CSS- of HTML-aanpassingen te prototypen voordat ze deze in de code doorvoeren.
Observeer JavaScript-wijzigingen in realtime
Het tabblad Elementen weerspiegelt elke mutatie van de DOM live. Als een script een element toevoegt na een gebruikersklik, verschijnt het bijbehorende knooppunt onmiddellijk in de boomstructuur. Gewijzigde knooppunten worden onderscheiden door een korte paarse flits in Chrome.
Deze mogelijkheid om realtime te observeren maakt de inspecteur fundamenteel anders dan de eenvoudige bronweergave. Om een onverwacht gedrag op een interactieve pagina te diagnosticeren, biedt alleen de gerenderde DOM in de DevTools een nauwkeurig beeld van wat er gebeurt.
Drie concrete gevallen waarin de bronweergave niet voldoende is
De bronweergave is handig voor snelle controles van meta-tags, semantische structuur of de aanwezigheid van een derde partij script. Echter, het bereikt zijn grenzen in verschillende specifieke situaties.
- Websites die zijn gebouwd met JavaScript-frameworks (React, Vue, Angular) genereren het merendeel van de HTML aan de clientzijde. De bruto bron bevat vaak slechts een lege root div-tag en links naar JS-bestanden.
- Pagina’s die inhoud laden via AJAX-verzoeken na de initiële weergave. De dynamisch toegevoegde HTML verschijnt nooit in de bruto bron.
- De shadow DOM-elementen, gebruikt door sommige ingekapselde webcomponenten, zijn onzichtbaar in de klassieke bronweergave maar toegankelijk via de inspecteur met de optie “Show user agent shadow DOM” ingeschakeld in de instellingen van de DevTools.
Kiezen tussen Ctrl + U en F12 hangt dus af van het type site dat wordt geanalyseerd. Voor een statische site of een klassieke CMS is de bruto bron voldoende. Voor alles daarbuiten, worden de DevTools de verplichte toegangspoort naar de code die daadwerkelijk door de browser wordt uitgevoerd.
