It’s #FrontendFriday – console.what? 5 Methoden des Console-Objektes, die du (vielleicht) noch nicht kennst
Endlich Freitag, denn das bedeutet jeden 2. Freitag – es ist wieder #FrontendFriday! Heute geht es um das Console-Objekt.
Jede/r (Frontend-) Entwickler:in hat schon mal das Console-Objekt benutzt. Zu den gängigsten Methoden zählen console.log(), console.info(), console.debug(), console.warn(), console.error() und console.clear(). Das Console-Objekt hat jedoch noch weitere Features, von denen ich dir im folgenden die nützlichsten vorstellen möchte.
1. console.count()
Oft benötigt man als Entwickler:in die Möglichkeit, etwas zu zählen. Vor allem beim Debuggen eines Bugs möchte man ggf. herausfinden, wie oft eine bestimmte Funktion oder Aktion ausgeführt wird. Hier hilft die Methode console.count(): auf jeden Aufruf folgt in der Console die Angabe darüber, wie oft es bereits aufgerufen wurde. Das ganze sieht dann so aus:
Optional kann man der Methode einen Parameter label mitgeben um mehrere, unabhänige Zähler zu verwalten. z.B. console.count('Blaue Autos') oder console.count('Rote Autos').
Aber Achtung: sobald die Konsole geleert wird – auch über console.clear() -, werden alle Zähler zurückgesetzt.
2. console.time(), console.timeLog() und console.timeEnd()
Auch die Features des Console-Objektes zur Messung von Zeit kann bei der Analyse von Bugs enorm hilfreich sein. Auch hier können mehrere Timer über die Mitgabe eines Labels als Parameter unabhängig voneinander getrackt werden. Mit console.timeLog() kann eine Zwischenzeit ausgegeben werden.
3. console.group() bzw. console.groupEnd()
Diese Methode ermöglicht das Gruppieren von Consolen-Meldungen. Dadurch sind auch verschachtelte Darstellungen möglich. Den jeweiligen Gruppennamen kann man einfach über einen String mit in die Methode geben:
4. console.table()
Eine weitere Möglichkeit zur Optimierung der Darstellung von Datenstrukturen bietet die Methode console.table(). Einfach das Datenarray rein werfen und… ta-da!
5. console.trace()
Die letzte Methode, die ich Dir vorstellen möchte ist schnell erklärt: sie gibt den Stacktrace aus.
Mehr über Frontend Entwicklung erfahren
