Google Chrome DevTools

“Gebruik je Chrome of een andere browser?”

“Helaas, we ondersteunen die browser niet. Gebruik Chrome alstublieft.”

“Dit is een prima browser joh, maar ik gebruik liever Chrome.”

Voor velen van ons komen deze zinnen bekend voor. Of we deze tegen de klant hebben gezegd terwijl we een probleem uitzoeken of gewoon tegen een collega of vriend. Google Chrome is al jaren de meest gekozen browser om op het internet te surfen en om apps te ontwikkelen. Hij is snel, veelzijdig en modern.

Maar naast al deze voordelen heeft Chrome ook een ander, belangrijker voor- /onderdeel: Chrome DevTools. That’s where the magic happens! DevTools is een applicatie binnen Chrome die een ontwikkelaar helpt om tijdens het ontwikkelen de applicatie goed te kunnen debuggen, stijlen aan de elementen toe te voegen, alle netwerk calls te monitoren, de prestatie te verbeteren en nog veel meer. De enorme kracht en bruikbaarheid van DevTools is één van de voornaamste redenen waarom Chrome zo’n populaire browser is geworden.

Als je net begonnen bent met applicatie ontwikkeling of als je al een ervaren programmeur bent is het altijd handig om wat (extra) tips en trucjes te weten rondom het gebruik van DevTools. Deze blog zet handige tips op een rij om het meeste uit DevTools te halen.

Het console object

Iedereen kent console.log maar wist je dat het object veel meer biedt?

• console.table: toont alle items van een array in een tabel om de gegevens gemakkelijk te raadplegen.

• console.time: handig om te weten hoeveel tijd een operatie kost (bijv. een loopje), op basis daarvan kan je de logica verbeteren (indien nodig).

• console.group: handig om berichten te groeperen

Enzovoort.

Het $

Geen geld, geen JQuery, maar toch handig.

• $_: geeft de laatste geëvalueerde waarde (in het console venster) terug

• $0: het DOM element dat op dit moment is geselecteerd (in het Elements venster)

• $1/$2…: het element welke net vóór het huidige element werd geselecteerd, enzovoort.
• $ = afkorting voor document.querySelector

$(“.root”) => het DOM element dat een class “root” heeft

Styling van elementen

• De :hov optie geeft de mogelijkheid om een bepaalde state op een element te forceren.

• Waarden verhogen/verlagen: voor numerieke waarden bijv. pixels kun je op het toetsenbord de pijltoetsen omhoog en omlaag gebruiken. Dit wist je wellicht al, maar je kunt daar nog meer mee:
  • Houd de Command toets (Windows toets) ingedrukt om de waarde in stapjes van 100 te veranderen
  • Houd de Shift toets ingedrukt om de waarde in stapjes van 10 te veranderen
  • Houd de Option toets (Alt toets) ingedrukt om de waarde in stapjes van 0.1 te veranderen
• Als je over de geselecteerde kleur in het kleurenpalet beweegt, zie je een optie om de kleur naar het klembord te kopiëren – niet alleen de waarde zelf maar ook in de gekozen/getoonde format.

Gegevens vanuit een GET-call

Wil je weleens de data die je vanuit een REST service terugkrijgt, bij de hand hebben om snel iets in de console te hacken? Daar is ook een makkelijke manier voor – gewoon copy en paste!

Interessant hè!? DevTools heeft nog veel meer dingen die je kunt leren en gebruiken om een betere programmeur te worden. Dit was nog maar een sneak peak.

Ik hoop dat je vandaag iets nieuws van me hebt geleerd. Happy programming!