Workflow verbeteren met JavaScript console

door | okt 11, 2018 | Blog

Als een webdeveloper, weet je heel goed hoe je jouw code moet debuggen. We gebruiken vaak externe libraries voor logs, maar de console van je browser is krachtiger dan je denkt! Gebruik jij de console voor debugging? Misschien heb je nog niet van deze tips gehoord.

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.

 

System4

“Er zijn meer methodes dan console.log in je browser console.”

Wat is de 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.log, console.error, console.warn en console.info

Dit zijn mogelijk de meest gebruikte methodes van allemaal. Je kan meer dan één parameter invoeren. Elke parameter wordt geëvalueerd en samengevoegd in een string, begrensd door een spatie. Maar in het geval van objecten of arrays kun je door de eigenschappen navigeren.

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:

Console.table

Het weergeven van json of grote json arrays in een console.log is verschrikkelijk. Console.table heeft deze ervaring veranderd. Met de console.table kun je deze structuren visualiseren in een prachtige tabel, waar je de kolommen een naam kunt geven en deze als parameters kan doorgeven.

Zie onderstaand voorbeeld:

Het resultaat is erg handig tijdens het debuggen.

Console.count, Console.time en Console.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:

De output zou er dan zo uit moeten zien:

Console.trace en Console.asset

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:

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.