Logging mit der Google Chrome Konsole

Fehler in einer Anwendung sind schwer zu debuggen, vor allem, wenn sie sich im Produktivbetrieb befindet. Log-Einträge sind eine enorme Hilfe – sofern sie qualitativ sind. Ein Fehlerprotokoll wie das obige wird relativ wenig helfen. Die Developer-Konsole von Google Chrome bietet hier zahlreiche Möglichkeiten zur Optimierung.

Beim Debuggen einer Anwendung wird jede Codezeile eines Programms einzeln durchlaufen, Werte einer bestimmten Variablen im Detail angesehen und bestimmte Funktionsaufrufe nachgestellt. Wenn sich eine Anwendung im Debug-Modus befindet, wird jedoch die gesamte Anwendung unterbrochen und kann in diesem Zeitraum nicht verwendet werden.

Eine bessere Möglichkeit sind Log-Einträge: Sie zeigen in welchen Programmabschnitten Fehler aufgetreten sind und welche Werte diese Fehler verursacht haben. Wichtig ist hierbei jedoch, dass die Werte entsprechend protokolliert werden. Es ist für einen Entwickler deutlich leichter nachzuvollziehen, an welcher Stelle ein Fehler aufgetreten ist, wenn der Log-Eintrag alle notwendigen Details beinhaltet und er den Fehler in seiner lokalen Entwicklungsumgebung nachstellen kann.

Es ist dem Entwickler möglich, herauszufinden, unter welchen Bedingungen der Fehler aufgetreten ist, wenn alle zusätzlichen Werte im Log-Eintrag ebenfalls ausgegeben werden. Er kann mit den Informationen beispielsweise direkt in die Datenbank schauen. Besonders in der Web-Entwicklung ist die Konsole der verschiedenen Browser ein gutes Tool um Log-Einträge genauer unter die Lupe nehmen zu können. In diesem Artikel konzentrieren wir uns auf die Konsole des Google Chrome.

Was die Google Chrome-Konsole kann

Um Log-Einträge auf der Konsole ausgeben zu lassen (sowohl in der Webanwendung, als auch direkt in der Konsole), lassen sich die Methoden des consoleObjektes verwenden:

• log()– Informations-Logs
• error()– Fehler-Logs. Werden üblicherweise ausgegeben, wenn ein Fehler aufgetreten ist, der die Anwendung im aktuellen Zustand nicht wie gewünscht ausführen lässt
• warn()– Warnungs-Logs. Werden ausgegeben, wenn ein Fehler aufgetreten ist, der die Anwendung trotz des Fehlers wie gewünscht ausführen lässt
• group()undgroupEnd()– Lässt sich verwenden um mehrere Log-Einträge zu gruppieren
• assert()– Zeigt Log-Einträge nur an, wenn eine bestimmte Bedingung erfüllt ist

Detaillierte Fehler- und Warnhinweise

Das Gruppieren von Log-Einträgen hilft, bei mehreren Log-Einträgen den Zusammenhang nicht zu verlieren:

Ist ein Fehler aufgetreten, lässt sich mit der error-Methode ein Fehler auf der Konsole ausgeben:

Eine Warnung hingegen, würde folgendermaßen aussehen:

Interessanter wird es, wenn man zusätzlich auch ganze Objekte ausgeben möchte, damit man sich diese in der Konsole genauer ansehen kann:

Hier lassen sich in der Konsole ganze Objekte ausklappen und so genauer inspizieren. Damit kann der Entwickler später herausfinden, unter welchen Voraussetzungen diese Warnung aufgetreten ist.

Styling und Einschränkungen

Zudem ist es möglich bei Log-Einträgen CSS mit anzugeben, was dazu führt, dass sich diese Einträge in der Konsole stylen lassen:

Und mit „Assertions“ ist es möglich, Log-Einträge nur unter bestimmten Bedingungen auszugeben:

Konnte der Benutzer hingegen angemeldet werden, wird dieser Log-Eintrag nicht angezeigt:

Die Entwicklerkonsole von Google Chrome bringt zahlreiche Werkzeuge mit, um die Log-Einträge in der Konsole genauer zu steuern – ihre Nutzung hat sich aus diesem Grund bei uns etabliert. So lassen sich Einträge vom Aussehen her verändern oder komplett verstecken. Gleichzeitig ist es möglich, mehr Informationen mit auszugeben, die für einen Entwickler während der Entwicklung oder für die Fehleranalyse relevant sind. Natürlich bringen aber auch die Konsolen anderer Browser wie Mozilla Firefox und Apple Safari ähnliche Vorteile mit sich.

Fehler passieren – mit verschiedenen Testing-Methoden versuchen wir jedoch, sie schnell zu erkennen und wenn möglich sogar zu vermeiden. Lesen Sie hier mehr zu Testing bei appcom!

Jetzt Beitrag teilen