JavaScript Console: Verhoog je debug-efficiëntie
JavaScript console heeft immense kracht voor webontwikkelaars en dient als een essentieel instrument voor debugging. Vaak grijpen we naar externe bibliotheken voor het loggen, maar de mogelijkheden van de console van onze browser blijven onderbenut. Benut jij het volledige potentieel van de console voor debuggingstaken? Misschien zijn deze inzichten nieuw voor je.
Als we aan een console denken, dan is het eerste wat je te binnen schiet ‘console.log’, toch? Maar er zijn meer methodes voor debugging in de console van je browser. We geven je enkele tips om het beste uit de browser console te halen en ze beter leesbaar te maken.
“Er zijn meer methodes dan console.log in je browser console.”
Wat is de JavaScript Console?
Het JavaScript console is een ingebouwde feature in de moderne browsers. Een tabblad in de developers tools in een handige interface. Hiermee kan een developer:
- Foutmeldingen en waarschuwingen inzien dat op een pagina voorkomen.
- JavaScript code uitproberen op de webpagina
- Applicaties debuggen en de DOM rechtstreeks in de browser doorkruisen
- Netwerkactiviteiten inzien en analyseren
Komrtom kun je hiermee JavaScript schrijven, beheren en monitoren rechtstreeks vanuit je browser. Dit doe je overigens door op ‘F12’ op jouw toetsenbord te drukken, ‘CTRL + Shift + I’ of ‘rechtermuisknop > inspect’ op de betreffende webpagina.
console.group
Met deze methode kun je een reeks console.logs (maar ook foutinformatie enz.) onder een groep samenvoegen die kan worden samengevouwen. De syntax is echt heel simpel: voer gewoon alle ‘console.log’ in die je wilt groeperen voor een ‘console.group ()’ (of ‘console.group Collapsed ()’, als je wilt dat deze standaard wordt gesloten). Voeg vervolgens aan het einde een ‘console.groupEnd ()’ toe om de groep te sluiten. Probeer het eens met onderstaande code:
<script src=”https://gist.github.com/GustiCup/12f86a0b91f881f97cea8f6ac61c5211.js”></script>
Het resultaat is erg handig tijdens het debuggen.
Foutopsporing met JavaScript Console: count, time, timeEnd
Deze drie methodes zijn onwijs handig voor elke developer die moet debuggen. De console.count telt en geeft het aantal keren weer dat ‘count ()’ is aangeroepen op dezelfde regel en met hetzelfde label. De console.time start een timer met een naam die is opgegeven als een invoer parameter en kan maximaal 10.000 gelijke timers op een bepaalde pagina uitvoeren. Eenmaal gestart, gebruik je de console.timeEnd om de timer te stoppen en de verstreken tijd naar de console af te drukken. Een voorbeeld:
<script src=”https://gist.github.com/GustiCup/dea552666262599fef999b0bfbd04560.js”></script>
De output zou er dan zo uit moeten zien:
Gebruik van JavaScript console.trace en console.assert
Met deze methodes wordt eenvoudig een ‘stack trace’ afgedrukt vanaf het punt waar het werd aangeroepen. Stel je voor dat een JS-library wordt aangemaakt om de gebruiker te laten weten waar de fout is gegenereerd. In dat geval kunnen deze methoden erg handig zijn. De console.assert lijkt namelijk op de console.trace, maar wordt alleen afgedrukt als de voorwaarde geslaagd was. Bijvoorbeeld:
<script src=”https://gist.github.com/GustiCup/967ac0dbd03a5e8f7a152479698b2d99.js”></script>
Zoals je dan kunt zien, is de output precies zoals React (of elk andere library) ons zou laten zien als we een uitzondering genereren:
Verwijder alle consoles
Het gebruik van consoles dwingt ons vaak om ze uit te sluiten. Of soms vergeten we de ‘production build’ (en merken ze het slechts dagen later op). Natuurlijk adviseren we niemand om consoles te misbruiken waar ze niet nodig zijn (de console in de ‘change input’ kan worden verwijderd nadat je ziet dat het werkt). Je moet ‘error logs’ of ‘trace logs’ in development mode laten staan om je te helpen bij het opsporen van fouten.
Met bijvoorbeeld Webpack kun je bijvoorbeeld alle consoles verwijderen die je niet wilt behouden (op type) uit de production build met de uglifyjs-webpack-plugin. De configuratie vereenvoudigt het werk enigszins, dus heb plezier met de console (maar maak er geen misbruik van!) De developers van System4 gebruiken ook de developers tools van de browser bij het debuggen. Hoe doe jij dat? Heb je hier iets aan gehad, ga je dit ook uitproberen of wist je dit al lang? Misschien heb je zelfs een veel betere manier om gemakkelijk te debuggen.