Hoe krijg je toegang tot broncode in Google Chrome: 4 eenvoudige methoden
Het bekijken van de broncode van een HTML-pagina is best een slimme zet, vooral als je je verdiept in webdevelopment of gewoon wilt begrijpen hoe een website werkt. Soms laden websites scripts of stijlen dynamisch, waardoor de code die je op de pagina ziet niet het hele verhaal vertelt. Daar komt het bekijken van de broncode goed van pas, met name als je data wilt scrapen of gewoon wilt leren hoe dingen in elkaar zitten. En ja, Chrome maakt het vrij eenvoudig, maar eerlijk gezegd kan het een beetje verwarrend aanvoelen als je niet bekend bent met de tools of het jargon.
Google Chrome biedt een paar eenvoudige manieren om een kijkje achter de schermen te nemen. Ten eerste kun je de onbewerkte HTML-broncode rechtstreeks van de server openen, of je kunt interactieve tools gebruiken die de code weergeven nadat de JavaScript en CSS van de site hun werk hebben gedaan. De tool “Inspecteren” is in principe wat elke ontwikkelaar gebruikt om door de code te navigeren. Het is enorm handig voor het debuggen of om complexe lay-outs te begrijpen. Maar let op: soms is de broncode die je ziet niet precies wat er oorspronkelijk is weergegeven, vanwege DOM-manipulaties of andere scripts. Het is een beetje vreemd, maar in sommige configuraties laadt “Inspecteren” of de broncodeweergave mogelijk niet direct. Het opnieuw laden van de pagina, het wissen van de cache of zelfs het afsluiten en opnieuw openen van Chrome kan helpen.
Hoe krijg ik toegang tot de paginabron en de inspectietool in Chrome?
Sneltoetsen gebruiken
De snelste manier? Druk gewoon op de toets Ctrl + Uop Windows of ⌘-Option-UMac. Dit opent direct een nieuw tabblad met de onbewerkte HTML. Op sommige websites is dit de gemakkelijkste manier, vooral als je alleen even snel de code wilt bekijken. Houd er wel rekening mee dat dit de code weergeeft zoals de server deze verzendt, niet zoals deze eruitziet nadat JavaScript of stijlen de code hebben aangepast. Voor een gedetailleerdere analyse is het paneel ‘Inspecteren’ een betere optie.
Het contextmenu gebruiken
Klik met de rechtermuisknop ergens op de pagina – ja, echt overal – en je ziet opties zoals ‘Paginabron bekijken’ of ‘Inspecteren’. Selecteer ‘Paginabron bekijken’ om de onbewerkte HTML te zien die wordt weergegeven en die wordt bijgewerkt als je de pagina vernieuwt. Als je ‘Inspecteren’ kiest, wordt het Chrome DevTools-paneel geopend bij het element waarop je hebt geklikt. Zo kun je de huidige status van dat element zien nadat scripts of stijlen zijn toegepast. Dit is handig bij het oplossen van problemen met de lay-out of dynamische content. Soms laadt dit paneel niet meteen, dus geef het even de tijd of vernieuw de pagina indien nodig – Chrome kan hier soms wat onvoorspelbaar zijn.
URL bewerken om de broncode te bekijken
Voor de echte nerds en mobiele gebruikers: je kunt de URL zelf hacken. Klik gewoon op de adresbalk en typ vervolgens `view-source:https://www.example.com` view-source:vóór de URL van de webpagina. Dus, als het https://www.example.com was, verander het dan in `view-source:https://www.example.com` en druk op Enter. Dit laadt direct de onbewerkte HTML. Ik weet niet zeker waarom het werkt, maar het is superhandig op mobiele apparaten, omdat de browserinterface de ontwikkelaarstools soms in de weg kan zitten. Het is een vreemde truc, maar het redt soms de dag.
Toegang via het Chrome-menu
Als een rechtermuisklik niet werkt, biedt het Chrome-menu uitkomst. Klik op het pictogram met de drie puntjes, ga naar Meer tools en selecteer Ontwikkelaarstools. Hiermee opent u het DevTools-paneel, dat boordevol functies zit, zoals Elementen, Console, Netwerk, enzovoort. Het tabblad Elementen is waar u waarschijnlijk de meeste tijd zult doorbrengen, om live DOM’s te bekijken of stijlen aan te passen. Het kan in het begin wat overweldigend zijn, maar door hiermee te experimenteren kunt u veel leren over hoe websites werken. Bonus: u kunt apparaatemulatie in- of uitschakelen en mobiele lay-outs direct testen.
Kennismaken met de basisprincipes van broncode
Als je de code eenmaal voor je hebt, helpt het enorm om de basisprincipes te begrijpen. HTML is opgebouwd uit tags, zoals <p>voor alinea’s, <div>voor containers of <a>voor links. Deze tags vertellen de browser wat elk stukje content is. Attributen binnen tags, zoals classof, geven extra informatie, zoals styling of het identificeren van specifieke elementen.De webpagina van MDN over HTML-elementenid is bijvoorbeeld een goede bron als je de weg kwijtraakt.
Onthoud dat wat je in de broncode ziet, niet altijd het volledige plaatje is. Scripts wijzigen DOM-elementen na het laden, waardoor de pagina er in realtime anders uit kan zien. Daar komt de inspectiefunctie van pas, omdat deze de *daadwerkelijke* code laat zien waarmee je interactie hebt, en niet alleen de originele HTML.
Eerlijk gezegd? Het is soms best rommelig: scripts laden asynchroon en DOM’s veranderen voortdurend. Maar als je de basis eenmaal begrijpt, wordt debuggen en gewoon leren een stuk makkelijker. Want natuurlijk moet Chrome het een beetje ingewikkeld maken.