Tips & Tricks voor de DevTools in Google Chrome

Tijdens de ontwikkeling van een website wordt er regelmatig gecontroleerd wat het resultaat is. In elke browser zit een DOM-inspector om te zien wat de elementen zijn binnen de pagina die wordt bekeken. In Google Chrome zit een geavanceerde versie van de “developer tool”, ook wel DevTools genoemd. In FireFox heet deze tool “FireBug”.

In deze blog zullen de verschillende functies van de Google Chrome DevTools toegelicht worden en verschillende tips gegeven hoe de DevTools optimaal gebruikt kunnen worden.

Hoe worden de DevTools geopend?

De DevTools kunnen op verschillende manieren geopend worden. Hieronder worden de vier meest gebruikte manieren uitgelegd.

De DevTools kunnen geopend worden wanneer er op de pagina op rechtermuisklik wordt gedrukt. Hierbij wordt een menu geopend waarbij de DevTools onder “Element inspecteren” staat.

De DevTools kunnen ook geopend worden wanneer er op F12 wordt gedrukt.
Een andere ‘shortcut’ voor de DevTools zijn Ctrl+Shift+I voor Windows en Cmd+Opt+I voor de Mac.
Als laatste kunnen de DevTools benaderd worden via het menu van Google Chrome. Hierbij staat het onder “Tools > Developer Tools” of “Meer hulpprogramma’s > Hulpprogramma’s voor ontwikkelaars”.

De verschillende tabs in de Google Developer Tools

Wanneer de Developer Tools geopend zijn, is er te zien dat er verschillende tabs zijn. Hieronder zullen de belangrijkste tabs toegelicht worden en wat hier allemaal mogelijk mee is.

Elements

Onder de tab “Elements” zijn alle dom-elementen te vinden die op de huidige pagina gebruikt worden. Deze elementen kunnen real-time aangepast worden om direct een beeld te krijgen wat de aanpassing zal doen op de pagina. Deze aanpassingen vinden alleen plaats in de browser en zullen weg zijn wanneer de pagina wordt ververst of de browser wordt afgesloten.

Wanneer er met de rechtermuis op een dom-element wordt geklikt, komt er een menu met schillende opties.

Met “Add Attribute” kan er een attribuut aan een element worden toegevoegd, denk hierbij aan een class, id, style, etc.
Met “Edit Attribute” kan een bestande attribuut worden aangepast, deze optie wordt alleen getoond wanneer de rechtermuisklik op een attribuut was.
Met “Edit as HTML” kan het gehele element worden aangepast. Wanneer het element child-elementen heeft worden deze ook getoond in het edit-scherm.
Met Del op de Windows of fn+Backspace op de mac kan het gehele element verwijderd worden. Wanneer het element child-elementen bevat worden deze ook verwijderd uit de pagina.

Ctrl+Z/Cmd+Z en Ctrl+Y/Cmd+Y werken ook tijdens het aanpassen van de dom. Wanneer er dus een aanpassing wordt gedaan kan deze teruggezet worden met de redo-functie.

Naast het aanpassen van elementen kan ook de CSS van de elementen worden aangepast. Onder de dom-elementen staat een tab “Styles”. Wanneer een element in het dom-scherm wordt geselecteerd komen onder Styles alle stijling te staan. Wanneer er CSS-stijling op verschillende classes of id’s is gebruikt worden deze allemaal in getoond. Alleen de class of id die op het element gebruikt is wordt of worden in zwart getoond, de overige selectors zijn grijs.

Om een stijling toe te voegen hoeft er alleen op de linkermuisknop geklikt te worden aan het einde van een bestaande CSS-regel. Hierdoor wordt een leeg invoerveld getoond met auto-complete waarin de regel toegevoegd kan worden. Met Tab kan de waarde achter de CSS-attribuut geplaatst worden.

Bovenaan de Styles-tab staat “element.style”. Wanneer hier een CSS-regel wordt toegevoegd, wordt deze regel als “styles”-attribuut toegevoegd aan het dom-element.

Rechts van de stijling staat een afbeelding waarin wordt uitgebeeld wat de breedte en hoogte van het element zijn. Hierbij worden deze groottes verdeeld over de margin, border, padding en elementbreedte. Door op de waardes óf de streepjes dubbel te klikken kan de waarde aangepast worden.

Console

In “Console” worden verschillende dingen getoond op het gebied van Javascript. Wanneer een pagina een JS-error bevat, wordt deze in het rood getoond in het console.

Console.log wordt ook getoond in het console, deze tekst wordt in het zwart getoond. Onder de regels staat een invoerveld met een blauwe pijl. In dit veld kan JS in de huidige pagina gebruikt worden. Wanneer er frameworks in de pagina gebruikt worden kunnen deze ook aangeroepen worden via het console.

Wanneer er code in het invoerveld is geplaatst en op enter wordt gedrukt, wordt de code direct uitgevoerd. Wanneer er meerder regels code toegevoegd moeten worden kan dit gedaan worden door middel van Shift+Enter.

Bovenaan het console staan nog een paar opties:

Met “Preserve log” worden alle errors, warnings, logs en codes bewaard in het console. De code in deze log wordt echter niet meer uitgevoerd, het wordt alleen getoond in het scherm.
Wanneer er op de trechter wordt geklikt worden verschillende filter-opties getoond om de getoonde errors, warnings en andere regels te filteren. Hierbij kan er gefilterd worden op type regel en gezocht worden op tekst.

Network

Onder de tab “Network” worden alle afbeeldingen, scripts en andere elementen getoond die in de site worden geladen. Hier wordt ook getoond wat de laadtijden zijn van alle elementen. Hierop kan bepaald worden of de totale laadtijd van een pagina te lang is en waardoor dit komt.

Wanneer er in de pagina een afbeelding of andere element wordt ingeladen die niet gevonden wordt, wordt deze in het rood getoond in dit scherm. Hierbij wordt ook aangegeven of het om wat voor status het gaat.

Er wordt ook getoond wanneer er bijvoorbeeld JSON-calls gedaan worden op de site. Wanneer er op de JSON-call wordt geklikt kan er onder “Headers” de response en request headers van de call bekeken worden. Dit kan erg handig zijn om te zien wat voor data er verstuurd en opgehaald worden.

Applications

Als laatste wordt in “Applications” alle cookies getoond die op de site worden gebruikt. De cookies zijn te vinden onder “Storage > Cookies”. In dit schema wordt alle data van de cookies getoond. Door op een cookie met rechtermuis te klikken kan de cookie verwijderd worden om te zien wat dit voor effect heeft op te site.

Op bijvoorbeeld https://handicare-trapliften.nl/ worden cookies gebruikt voor onder andere het niet meer van de layer of cookiebar wanneer er op het kruisje wordt drukt. Door de cookie te verwijderen kan er getest worden of de layer goed getoond wordt op de site.

Bent u klaar voor de volgende stap te zetten naar online succes?

Onze Sigma Solutions experts staan klaar om al uw vragen te beantwoorden over het inzetten van DevTools in Google Chrome voor uw B2B bedrijf en helpen u met het zetten van de volgende stap naar Online succes. Neem voor een vrijblijvend adviesgesprek contact met ons op.