Of u nu een webdesigner bent die fouten opspoort in de broncode van uw site of gewoon nieuwsgierig bent naar hoe de code van een site eruitziet, u kunt de HTML-bron rechtstreeks in Google Chrome bekijken. Er zijn twee manieren om de HTML-bron te bekijken: Bron bekijken en Inspecteren met Developer Tools.
Bron bekijken met Paginabron bekijken
Start Chrome en ga naar de webpagina waarop u de HTML-broncode wilt zien. Klik met de rechtermuisknop op de pagina en klik op “Paginabron weergeven” of druk op Ctrl + U om de paginabron op een nieuw tabblad te zien.
Er wordt een nieuw tabblad geopend met alle HTML voor de webpagina, volledig uitgevouwen en ongeformatteerd.
Als u op zoek bent naar een specifiek element of onderdeel in de HTML-bron, is het gebruik van View Source vervelend en omslachtig, vooral als de pagina veel JavaScript en CSS gebruikt.
Inspecteer de bron met behulp van ontwikkelaarstools
Deze methode maakt gebruik van het paneel Developer Tools in Chrome en is een veel schonere benadering om de broncode te bekijken. HTML is hier gemakkelijker te lezen dankzij de extra opmaak en de mogelijkheid om elementen die u niet wilt zien samen te vouwen.
Open Chrome en ga naar de pagina die u wilt inspecteren; druk vervolgens op Ctrl + Shift + i. Er wordt een vastgezet venster geopend naast de webpagina die u bekijkt.
Klik op het kleine grijze pijltje naast een element om het nog verder uit te vouwen.
Als u niet standaard de code van de volledige pagina wilt zien, maar in plaats daarvan een specifiek element in de HTML wilt inspecteren, klikt u met de rechtermuisknop op die ruimte op de pagina en klikt u vervolgens op ‘Inspecteren’.
Wanneer het paneel deze keer wordt geopend, gaat het rechtstreeks naar het gedeelte van de code dat het element bevat waarop u hebt geklikt.
Als u de dockpositie wilt wijzigen, kunt u deze naar beneden, links, rechts verplaatsen of zelfs loskoppelen in een apart venster. Klik op het menupictogram (drie puntjes) en kies vervolgens respectievelijk loskoppelen in een apart venster, links vastzetten, onderaan vastzetten of rechts vastzetten.
Dat is alles wat er is. Wanneer u klaar bent met het bekijken van de code, sluit u het tabblad Bron weergeven of klikt u op de ‘X’ in het paneel Ontwikkelaarstools om terug te keren naar uw webpagina.