6 dingen die je wellicht niet weet over Chrome DevTools
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.
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.
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.
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.
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.
Je kan het teken “$” gebruiken om snel elementen van de console te selecteren, zonder jquery. Gebruik het teken tweemaal (dus “$$”) om alles te selecteren.
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!
