Google Chrome is niet alleen een snelle browser voor consumenten, maar verbergt ook tal van ontwikkelaarstoepassingen onder de motorkap. Je kunt een deel van deze kracht onthullen met de tool "Inspecteren". Hoewel het in eerste instantie overweldigend is, geeft het u inzicht in de manier waarop websites worden gebouwd en kan het u helpen bij het debuggen van uw eigen sites.

Toegang tot het inspectiegereedschap

Het hulpprogramma Inspecteren vindt u in het snelmenu van Chrome.

Klik met de rechtermuisknop op een element in uw browser en klik op "Inspecteren" in het contextmenu.

Er verschijnt een venster uit de zijkant van de Chrome-browser zoals hieronder te zien is. Dit wordt het DevTools-paneel genoemd. Als u Firebug ooit in Firefox hebt gebruikt, kunt u sommige delen ervan herkennen.

Er is hier veel, dus laten we de afzonderlijke stukken bekijken.

Inspecteur inspecteur

Het inspectiepaneel is onderverdeeld in verschillende tabbladen die zichtbaar zijn aan de bovenkant van het venster. We zullen ons richten op het standaard Elementen-tabblad.

Er zijn twee handige knoppen naast deze tabbladen. De eerste is de tool Inspect Element.

Met deze tool kunt u met de muis over en selecteer verschillende DOM-elementen om te inspecteren.

Met de tweede knop wordt de modus Apparaatvoorbeeld ingeschakeld. In deze modus kunt u zien hoe uw webpagina eruit ziet op verschillende resoluties en schermformaten.

Als u op die knop klikt, ziet u uw webpagina in een nieuwe weergave klikken.

U kunt dan het vervolgkeuzemenu boven het paginavoorbeeld of de hendels aan de zijkanten van het paginavoorbeeld gebruiken om het formaat van het apparaatvoorbeeldvenster te wijzigen.

HTML-weergave

Het grootste deel van het tabblad DevTools is bezet door het HTML-deelvenster.

Dit deelvenster lijkt op een superkrachtige "View Source". Het is gestructureerd volgens de DOM, met elementen die zijn genest in de bovenliggende elementen.

U zult zien dat het element dat u aan het begin hebt "geïnspecteerd" automatisch wordt gemarkeerd met een grijze of blauwe achtergrond. Hier heb ik een afbeelding bekeken die zich in een link bevindt. Zoals verwacht, zie ik een gemarkeerde ankertag.

Maar waar is mijn beeld? Ik kan alle DOM-elementen die in de ankertag zijn genest, weergeven door op de driehoek naast de koppeling te klikken. In dit geval onthult de pijl de tag die ik verwachtte te vinden.

U ziet ook een kleine menubalk onder aan het HTML-venster.

Dit wordt het broodkruimelpad genoemd en toont alle bovenliggende elementen van het geselecteerde element. Als u naar een van die elementen wilt navigeren, klikt u erop.

stijlen

Onder de HTML-weergave zien we ook een venster met CSS-regels die van toepassing zijn op ons element. Dit wordt het deelvenster Stijlen genoemd en in dit geval zien we alle regels die van toepassing zijn op de ankertag die ik eerder heb geïnspecteerd.

U kunt een regel in- en uitschakelen door erover te zweven en op het selectievakje ernaast te klikken.

U ziet deze wijziging onmiddellijk in het paginavoorbeeld. En als u rechtstreeks op een regel klikt, kunt u de naam en waarde ervan wijzigen.

U kunt ook naar bepaalde regels zoeken met het filterzoekvak.

Het deelvenster Stijlen is echter veel meer dan alleen dat. Bekijk de documentatie van Google voor een volledige uitleg van de vele functies van het Stijlpaneel.

Boxmodel en berekende stijl

Naast de stijlweergave is het doosmodel voor mijn geselecteerde element. Als u niet bekend bent, is het boxmodel een geabstraheerde weergave van de marge, rand, opvulling en inhoudsgrootte die op een bepaald element is toegepast.

In dit geval kan ik zien dat mijn element een primaire grootte heeft van 461 x 209 pixels. Het bevat geen regels voor marge, rand of opvulling, dus deze vakken zijn leeg.

Als u een element kiest met een bepaalde positie, marge, rand of opvullingsregels, ziet uw boxmodel er mogelijk als volgt uit.

U kunt ook een in-situbox -model zien als u over DOM-elementen beweegt terwijl het Inspect Element-gereedschap is ingeschakeld.

Onder het boxmodel staat een lijst met alle stijlregels die van toepassing zijn op dit specifieke element. Dit is iets anders in het deelvenster Stijlen. Het geeft niet de daadwerkelijke regels van CSS weer - alleen de effecten van die regels. Dit wordt de "berekende stijl" van het object genoemd en het is het gecombineerde resultaat van uw CSS.

Ten slotte kunt u naar bepaalde regels zoeken door in het vak Filter te typen.

Conclusie

Als u vaak met webpagina's werkt, is Chrome's Inspect-tool de moeite waard om te verkennen. En de andere tabbladen in DevTools, zoals Console en Network, kunnen van onschatbare waarde zijn voor ontwikkelaars. Er is meer aan de hand dan we nu kunnen doen, maar de eigen documentatie van Google is grondig en nuttig.