Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels "Verwendung der JavaScript-Konsole: Über console.log () hinaus" von Yash Agrawal.Eine der einfachsten Möglichkeiten, etwas in JavaScript zu debuggen, besteht darin, das Material mit console.log auszugeben. Es gibt jedoch viele andere Methoden, die von der Konsole bereitgestellt werden, um das Debuggen zu verbessern.Lasst uns beginnen.Der grundlegendste Anwendungsfall ist die Ausgabe einer Zeichenfolge oder einer Gruppe von JavaScript-Objekten. Ziemlich einfachconsole.log('Is this working?');
Stellen Sie sich nun ein Szenario vor, in dem Sie eine Reihe von Objekten haben, die Sie an die Konsole ausgeben müssen.const foo = { id: 1, verified: true, color: 'green};
const bar = { id: 2, verified: false, color: 'red' };
Die intuitivste Art der Ausgabe ist einfach mehrmals console.log (variabel). Das Problem wird deutlicher, wenn wir sehen, wie es in der Konsole angezeigt wird.
Wie Sie sehen können, sind die Variablennamen nicht sichtbar, was nicht sehr praktisch ist. Dies kann gelöst werden, indem alle Variablen in einem einzigen console.log ({foo, bar}) kombiniert werden. Es reduziert auch die Anzahl der console.log-Zeilen in unserem Code.console.table ()
Wir können den nächsten Schritt tun, indem wir all dies in eine Tabelle einfügen, um es besser lesbar zu machen. Verwenden Sie console.table (), wenn Sie Objekte mit gemeinsamen Eigenschaften oder einem Array von Objekten haben. Hier können wir console.table ({foo, bar}) verwenden und die Konsole zeigt:
console.group ()
Es kann verwendet werden, wenn Sie die entsprechenden Elemente gruppieren oder verschachteln möchten, um das Protokoll leicht lesen zu können.Sie können es auch verwenden, wenn Sie mehrere Protokollanweisungen in einer Funktion haben und den für jede Anweisung entsprechenden Bereich klar erkennen möchten.Wenn Sie beispielsweise Benutzerdaten registrieren:
console.group('User Details');
console.log('name: John Doe');
console.log('job: Software Developer');
console.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 console.group () verwenden, wenn die Gruppen standardmäßig reduziert werden sollen. Sie müssen auf die Griffschaltfläche links klicken, um sie zu erweitern.console.warn () & console.error ()
Je nach Situation können Sie Protokolle mit console.warn () oder console.error () hinzufügen, um die Lesbarkeit Ihrer Konsole zu verbessern. Es gibt auch console.info (), das in einigen Browsern das Symbol „i“ anzeigt.
Sie können noch weiter gehen, indem Sie Ihren eigenen Stil hinzufügen. Mit der Direktive% c können Sie jeder Protokollanweisung einen Stil hinzufügen. Dies kann verwendet werden, um zwischen API-Aufrufen, Benutzerereignissen usw. zu unterscheiden.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 Schriftgröße, den Schriftstil und andere CSS-Elemente ändern.
console.trace ()
console.trace () druckt den Stack-Trace auf die Konsole und zeigt, wie der Code an einem bestimmten Punkt beendet wurde. Es gibt bestimmte Methoden, die Sie nur einmal aufrufen möchten, z. B. das Löschen aus der Datenbank. console.trace () kann verwendet werden, um sicherzustellen, dass sich der Code so verhält, wie wir es möchten.console.time ()
Eine weitere wichtige Sache bei der Frontend-Entwicklung ist, dass der Code schnell sein sollte. Mit console.time () können Sie bestimmte Vorgänge im Code zum Testen synchronisieren.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++) {
Hoffentlich enthält dieser Artikel einige Informationen zu den verschiedenen Verwendungsmöglichkeiten der Konsole.