Heute veröffentlichen wir einen Hinweis zu den Funktionen der Verwendung der JavaScript-Konsole in Browsern, die außerhalb des bekannten
console.log() . Tatsächlich ist dieser Befehl das einfachste Tool zum Debuggen von Programmen, mit dem Sie etwas an die Konsole ausgeben können. Die Kenntnis einiger Funktionen dieses Tools ermöglicht es denjenigen, die es verwenden, die Arbeitseffizienz zu steigern.
Befehls- und Variablennamen von Console.log ()
Der einfachste Anwendungsfall für
console.log() ist beispielsweise die Ausgabe einer Zeichenfolge oder eines Objekts. Drucken Sie beispielsweise die Zeile auf der Konsole aus:
console.log('Is this working?');
Stellen Sie sich nun vor, Sie müssen mehrere Objekte an die Konsole ausgeben. Zum Beispiel - wie:
const foo = { id: 1, verified: true, color: 'green' }; const bar = { id: 2, verified: false, color: 'red' };
Vielleicht ist es am logischsten, mehrere Befehle der Form
console.log(variable) zu verwenden, um dieses Problem zu lösen. Obwohl die Daten an die Konsole gelangen, wird ein Problem bei der Ausgabe deutlich.
Schauen Sie sich an, was in der Konsole angezeigt wird.
Es gibt keine Variablennamen in der KonsoleWie Sie sehen können, sind die Variablennamen
foo und
bar nicht hier. Objekte, die das Pfeilsymbol in den linken Teilen der Linien verwenden, können erweitert werden. Selbst wenn Sie die interne Struktur von Objekten betrachten, kann es sehr schwierig sein zu verstehen, welches Objekt in der Konsole angezeigt wird. Bei der Lösung dieses Problems helfen uns berechnete Objekteigenschaftsnamen. Mit dieser Funktion von Objektliteralen, die in ES6 angezeigt wurde, können Sie nämlich ein praktisches Design in der folgenden Form verwenden:
console.log({ foo, bar });
Bei diesem Ansatz gelangt ein Objekt zur Konsole, deren Eigenschaftsnamen die Namen der variablen Objekte sind, die angezeigt werden müssen. Darüber hinaus können Sie auf diese Weise einige Aufrufe von
console.log() , die zuvor zum separaten Anzeigen von Objekten verwendet wurden.
Befehl console.table ()
Sie können das Erscheinungsbild der Programmanzeige in der Konsole weiter verbessern, indem Sie den Inhalt von Objekten in einer Tabelle formatieren. Dies hat einen guten Einfluss auf die Lesbarkeit der Informationen. Wir sprechen nämlich von der Tatsache, dass Sie den Befehl
console.table() können, wenn Sie Objekte mit denselben Eigenschaftsnamen oder Arrays ähnlicher Objekte in der Konsole
console.table() . Hier ist das Ergebnis der Ausführung eines Befehls der Form
console.table({ foo, bar }) .
Befehl Console.table () in AktionBefehl Console.group ()
Dieser Befehl kann verwendet werden, wenn Sie einige verwandte Daten gruppieren und Strukturen aus verschachtelten Gruppen erstellen müssen, um die Benutzerfreundlichkeit der Arbeit mit solchen Daten zu verbessern.
Darüber hinaus kann dieser Ansatz in Fällen verwendet werden, in denen mehrere Befehle zum Ausgeben von etwas an die Konsole in einer bestimmten Funktion ausgeführt werden und es notwendig ist, die Ergebnisse solcher Befehle auf einen Blick klar von anderen zu trennen.
Angenommen, wir zeigen Informationen zu bestimmten Benutzern in der Konsole an:
console.group('User Details'); console.log('name: John Doe'); console.log('job: Software Developer');
So sehen die Ergebnisse dieses Codes aus.
Gruppieren der Ergebnisse von Datenausgabebefehlen an die KonsoleBei Verwendung des
console.group() werden Gruppen standardmäßig in erweiterter Form angezeigt. Um sie zu minimieren, können Sie anstelle dieses Befehls den Befehl
console.groupCollapsed() verwenden. Um den Inhalt einer solchen Gruppe anzuzeigen, müssen Sie ihn mithilfe des Symbols links neben dem Gruppennamen erweitern.
Console.warn () und console.error ()
Je nach Situation können die
console.warn() und
console.error() nützlich sein, um die Wichtigkeit einiger auf der Konsole angezeigter Nachrichten hervorzuheben. Sie werden jeweils verwendet, um Warnungen und Fehler anzuzeigen.
Warnungen und FehlerMöglicherweise ist auch der Befehl
console.info() nützlich, mit dem Informationsmeldungen angezeigt werden.
Wenn Sie das Erscheinungsbild der in der Konsole angezeigten Nachrichten anpassen, können Sie noch weiter gehen, indem Sie sie selbst gestalten. Mit der Direktive
%c können Sie den in der Konsole angezeigten Text formatieren. Dies kann beispielsweise nützlich sein, um eine visuelle Trennung von Informationen zu organisieren, die von Subsystemen für den Zugriff auf bestimmte APIs stammen, von Subsystemen, die für die Verarbeitung von benutzergenerierten Ereignissen verantwortlich sind, und so weiter. Die Hauptsache hier ist, einige Stilisierungsregeln zu entwickeln und diese einzuhalten. Hier ist ein Beispiel für das Anpassen des Erscheinungsbilds der Datenausgabe an die Konsole:
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 andere CSS-Eigenschaften des Texts konfigurieren, z. B.
font-size und
font-style .
Styling der Datenausgabe an die KonsoleBefehl Console.trace ()
Mit dem Befehl
console.trace() die Ergebnisse der Stapelverfolgung an die Konsole
console.trace() und Sie können beurteilen, was an einem bestimmten Punkt im Programm während seiner Ausführung passiert ist. Beispielsweise gibt es einige Methoden, die in bestimmten Situationen nur einmal aufgerufen werden müssen, z. B. Methoden zum Entfernen von Informationen aus der Datenbank. Es kann überprüft werden, ob
console.trace() diese Methode wirklich nur einmal
console.trace() . Mit diesem Befehl können Sie Informationen in der Konsole anzeigen, mit deren Hilfe Sie den korrekten Betrieb der internen Programmmechanismen überprüfen können.
Befehl console.time ()
Eine der wichtigen Aufgaben des Front-End-Entwicklers ist die Bereitstellung von Hochgeschwindigkeitscode. Mit dem Befehl
console.time() können Sie die Ausführungszeit von Vorgängen messen und anzeigen, was Sie in der Konsole herausgefunden haben. Mit diesem Befehl untersuchen wir beispielsweise einige Zyklen:
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++) {
Schauen Sie sich an, was nach der Ausführung dieses Codes in die Konsole gelangt ist.
Ergebnisse der Verwendung von console.time ()Zusammenfassung
In diesem Artikel haben wir uns einige nützliche Kleinigkeiten zur Datenausgabe in der Browserkonsole angesehen. Wenn Sie diese Funktionen vorher nicht kannten, hoffen wir, dass Sie jetzt über neue nützliche JavaScript-Tools verfügen.
Liebe Leser! Wenn Sie große JavaScript-Projekte entwickeln, bitten wir Sie, uns mitzuteilen, wie Sie Protokollierungsprobleme in diesen Projekten lösen können.