Met Chrome DevTools kun je vanuit je browser meteen pagina’s aanpassen en problemen diagnosticeren, hieronder vind je een paar tips om je workflow te versnellen.

Maak live expressions vast aan je console

Je kan een live expression tab aan de bovenkant van de console vastmaken. Deze wordt constant bijgewerkt. Het kan erg handig zijn om specifieke elementen bij te houden waarvan je weet dat deze aangepast zouden moeten worden op je pagina.

Traag internet simuleren

Je kan verschillende internet snelheden simuleren vanuit het “Network” tab. Dit kan handig zijn om er achter te komen hoe je code reageert wanneer het meerdere seconden kan duren om in te laden.

Caching uitschakelen en logs behouden

Vaak zijn er issues die geen fouten blijken te zijn, maar cached code die verkeerd is ingeladen. Om dit te voorkomen kun je alle caching uitschakelen bij het “Network” tab. Let er wel op dat dit alleen cache zal uitschakelen wanneer het DevTools venster is geopend.

De “Preserve logs” functie is ook een handige feature om te voorkomen dat je logs of console output verwijderd zal worden wanneer je door verschillende pagina’s navigeert.

Screenshots nemen vanuit Chrome DevTools

Chrome DevTools heeft een ingebouwde manier om screenshots te nemen. Om het te gebruiken, toets je ctrl+shift+p in en type je met het DevTools scherm op “screenshot”. Zo simpel is het.

 Snelkoppeling naar document.querySelector

Je kan het teken “$” gebruiken om snel elementen van de console te selecteren, zonder jquery. Gebruik het teken tweemaal (dus “$$”) om alles te selecteren.

Control+klik om te zien waar een CSS property is gedefinieerd.

Als je ooit hebt willen weten waar een bepaalde CSS regel was gedefinieerd is dat makkelijk uit te vinden. Door ctrl ingedrukt te houden en op de regel te klikken wordt de locatie van de regel getoond.

Met deze tips voor Chrome DevTools zal je workflow hopelijk efficiënter worden!