So verwenden Sie die JavaScript-Konsole: über console.log () hinaus

Eine der einfachsten Möglichkeiten, etwas in JavaScript zu debuggen, besteht darin, Dinge mit zu protokollieren console.log. Es gibt jedoch viele andere von der Konsole bereitgestellte Methoden, mit denen Sie das Debuggen verbessern können.

Lass uns anfangen.

Der grundlegende Anwendungsfall besteht darin, eine Zeichenfolge oder eine Reihe von JavaScript-Objekten zu protokollieren. Recht einfach,

console.log('Is this working?');

Stellen Sie sich nun ein Szenario vor, in dem Sie eine Reihe von Objekten haben, die Sie an der Konsole anmelden müssen.

const foo = { id: 1, verified: true, color: 'green' };const bar = { id: 2, verified: false, color: 'red' };

Die intuitivste Möglichkeit, dies zu protokollieren, besteht darin, sie console.log(variable)nacheinander zu protokollieren . Das Problem wird offensichtlicher, wenn wir sehen, wie es auf der Konsole angezeigt wird.

Wie Sie sehen, sind keine Variablennamen sichtbar. Es wird sehr ärgerlich, wenn Sie einige davon haben und den kleinen Pfeil links erweitern müssen, um zu sehen, wie der Name der Variablen genau lautet. Geben Sie berechnete Eigenschaftsnamen ein. Dies ermöglicht es uns, im Grunde alle Variablen in einem einzigen zusammenzufassen, console.log({ foo, bar });und die Ausgabe ist leicht sichtbar. Dies reduziert auch die Anzahl der console.logZeilen in unserem Code.

console.table ()

Wir können noch einen Schritt weiter gehen, indem wir all dies in einer Tabelle zusammenfassen, um es besser lesbar zu machen. Wann immer Sie Objekte mit gemeinsamen Eigenschaften oder ein Array von Objekten verwenden console.table(). Hier können wir verwenden console.table({ foo, bar})und die Konsole zeigt:

console.group ()

Dies kann verwendet werden, wenn Sie relevante Details gruppieren oder verschachteln möchten, um die Protokolle einfach lesen zu können.

Dies kann auch verwendet werden, wenn Sie einige Protokollanweisungen in einer Funktion haben und den für jede Anweisung entsprechenden Bereich klar erkennen möchten.

Wenn Sie beispielsweise die Details eines Benutzers protokollieren:

console.group('User Details');console.log('name: John Doe');console.log('job: Software Developer');
// Nested Groupconsole.group('Address');console.log('Street: 123 Townsend Street');console.log('City: San Francisco');console.log('State: CA');console.groupEnd();
console.groupEnd();

Sie können auch console.groupCollapsed()anstelle von verwenden, console.group()wenn die Gruppen standardmäßig reduziert werden sollen. Sie müssten die Deskriptor-Schaltfläche links drücken, um zu erweitern.

console.warn () & console.error ()

Um sicherzustellen, dass Ihre Konsole besser lesbar ist, können Sie je nach Situation Protokolle mit console.warn()oder hinzufügen console.error(). Es gibt auch console.info()ein 'i'-Symbol in einigen Browsern.

Dies kann durch Hinzufügen eines benutzerdefinierten Stils noch einen Schritt weiter gehen. Sie können eine %cDirektive verwenden, um jeder Protokollanweisung ein Styling hinzuzufügen. Dies kann verwendet werden, um zwischen API-Aufrufen, Benutzerereignissen usw. zu unterscheiden, indem eine Konvention beibehalten wird. Hier ist ein Beispiel:

console.log('%c Auth ', 'color: white; background-color: #2274A5', 'Login page rendered');console.log('%c GraphQL ', 'color: white; background-color: #95B46A', 'Get user details');console.log('%c Error ', 'color: white; background-color: #D33F49', 'Error getting user details');

Sie können auch die ändern font-size, font-styleund andere CSS Dinge.

console.trace ()

console.trace()gibt einen Stack-Trace an die Konsole aus und zeigt an, wie der Code an einem bestimmten Punkt gelandet ist. Es gibt bestimmte Methoden, die Sie nur einmal aufrufen möchten, z. B. das Löschen aus einer Datenbank. console.trace()kann verwendet werden, um sicherzustellen, dass sich der Code so verhält, wie wir es möchten.

console.time ()

Ein weiterer wichtiger Punkt bei der Frontend-Entwicklung ist, dass der Code schnell sein muss. console.time()Ermöglicht das Timing bestimmter Vorgänge im Code zum Testen.

let i = 0;
console.time("While loop");while (i < 1000000) { i++;}console.timeEnd("While loop");
console.time("For loop");for (i = 0; i < 1000000; i++) { // For Loop}console.timeEnd("For loop");

Hoffentlich enthielt der Artikel einige Informationen zu verschiedenen Verwendungsmöglichkeiten der Konsole. Wenn Sie Fragen haben oder möchten, dass ich näher darauf eingehe, hinterlassen Sie mir bitte unten eine Nachricht oder kontaktieren Sie mich auf Twitter oder per E-Mail.