Hoe bekijk je de DOM van een pagina?
Met de inspectiefunctie van je browser. Rechtermuisknop op het element dat je wilt bekijken en kies Inspecteren.
Er opent een venster met de boomstructuur van je pagina, waarbij het element dat je aanklikte is uitgelicht.
Dat werkt in elke moderne browser en je hebt er niets voor nodig.
Wat je daar ziet
Links de structuur, rechts de opmaakregels die op het geselecteerde element van toepassing zijn.
Doorgestreepte regels zijn overschreven door een sterkere regel. Meer daarover lees je bij css.
Wat je ermee kunt
Tijdelijk waarden aanpassen om te kijken hoe iets eruit zou zien. Dat verandert niets aan je site; bij een herlaadactie is het weg.
Ideaal om een idee te toetsen voordat je iets echt aanpast.
Handige onderdelen
Het tabblad met meldingen laat fouten in je scripts zien. Het tabblad met netwerkverkeer laat zien welke bestanden geladen worden en hoe zwaar ze zijn.
Dat tweede is de snelste manier om te zien waar je laadtijd blijft. Meer daarover lees je bij pagespeed.
Mijn vuistregels
- Gebruik het om te begrijpen, niet om te bouwen.
- Wat je hier verandert, verdwijnt bij een herlaadactie.
- Kijk ook op het tabblad met meldingen; daar staan fouten die je anders mist.
- Maak een schermafbeelding als je iets aan je bouwer wilt melden.
Die laatste scheelt je bouwer veel zoekwerk.
Op je telefoon
Dat kan ook, door je telefoon met een kabel aan je computer te koppelen. Voor de meeste mensen is dat te omslachtig.
De vensterstand in je browser waarin je een klein scherm nabootst, komt een heel eind. Meer daarover lees je bij browser.
Waar je op moet letten
Dat je de DOM bekijkt en niet je broncode. Die twee kunnen verschillen.
Meer daarover lees je bij waarom je broncode afwijkt van je scherm.