Weitere Features der JavaScript-Konsole

Überblick

Sie verwenden console.log wahrscheinlich in all Ihren JavaScript-Projekten. Auf diese Weise können Sie bequem den Wert einer Variablen oder das Geschehen während der Ausführung eines Programms sehen. Das JavaScriptconsole-Objekt verfügt jedoch über zahlreiche weitere Funktionen, die Ihnen bei der Arbeit an Ihren Projekten helfen können. In diesem Artikel stelle ich einige meiner Favoriten vor und ich hoffe, Sie denken daran, sie bei Ihrer Arbeit zu verwenden!

Beachten Sie, dass die Beispiele hier für JavaScript gelten, das in einem Browser ausgeführt wird. Dies ähnelt der Ausführung von JavaScript in Node.js, das Verhalten in Node.js kann jedoch etwas anders sein.

console.log

Bevor wir auf andere Optionen eingehen, schauen wir uns an, was console.log macht. console.log gibt Meldungen an die Konsole aus. Sie können ein Objekt, ein Array, ein Array von Objekten, einen String, einen Booleschen Wert oder im Grunde alles eingeben, was Sie auf der Konsole ausgeben möchten. Hier ist ein Beispiel für die Verwendung von console.log und seiner Ausgabe:

console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

Dies ist die gebräuchlichste Debuggingmethode in JavaScript und auch die gebräuchlichste Konsolenmethode. Lassen Sie uns jetzt über einige andere Optionen sprechen!

konsole.info

console.info ist fast dasselbe wie console.log. Es druckt Informationsmeldungen auf die Konsole. Soweit ich weiß, gibt es keinen wirklichen Unterschied zwischen Protokoll und Info, es kommt nur darauf an, wie Sie die Nachricht klassifizieren. Wenn Sie sich jedoch dafür entscheiden, Nachrichten auf der Ebene „Info“ aus der Browserkonsole auszublenden, werden sowohl „Protokoll“- als auch „Info“-Nachrichten ausgeblendet. Um console.info zu verwenden, können Sie Folgendes tun:

console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

Auch hier ist die Ausgabe nahezu identisch.

konsole.warnen

console.warn druckt eine Warnmeldung auf die Konsole. Es bewirkt im Wesentlichen dasselbe wie das vorherige, aber die Nachricht hat einen gelben Hintergrund in der Konsole und ein Warnsymbol (zumindest in den Chrome Dev Tools). Verwenden Sie console.warn, wenn Sie eine Aktion ausführen, die zu Fehlern in Ihrem Programm führen könnte, aktuell aber keine Probleme verursacht. Dadurch erfahren Sie und Ihre Benutzer oder andere Entwickler, wo Probleme auftreten könnten.

console.warnen({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

Wie zuvor können Warnungen durch Übergeben des gleichen Werts auf der Konsole ausgegeben werden.

Konsolenfehler

console.error gibt Fehlerinformationen an die Konsole aus. Im Wesentlichen bewirkt es dasselbe wie das vorherige, aber die Nachricht hat in der Konsole einen roten Hintergrund mit einem roten Kreis und einem weißen „x“-Fehlersymbol (zumindest in den Chrome Dev Tools). Wenn bei Ihrem Programm etwas schief geht, verwenden Sie console.error. Es bietet anderen Entwicklern eine einfache Möglichkeit, die Ursache des Problems herauszufinden und zu beheben. Sie erhalten einen Stapelüberwachungsbericht des Fehlers, sodass Sie auch nach dem Fehler suchen können.

console.error({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

Wie zuvor können Fehler durch Übergeben des gleichen Werts auf der Konsole ausgegeben werden.

Konsolentabelle

Dies ist eine meiner bevorzugten Konsolenoptionen, auch wenn ich sie oft vergesse. console.table akzeptiert einige Daten, die in einem tabellarischen Format angezeigt werden können, und gibt sie aus. Schauen wir uns einige Beispiele an. Wir beginnen mit console.table auf dem Objekt:

console.table({ Restaurantname: 'Pizza Planet', Straßenadresse: '123 Maple' });

Die Ausgabe in den Entwicklertools sieht ungefähr so ​​aus:

Es ruft jeden Eigenschaftsnamen des Objekts ab und platziert ihn in der Indexspalte und den Wert der Eigenschaft in der Wertspalte. Dies geschieht für jede Eigenschaft im Array. Was passiert also, wenn wir ein Array von Objekten ausgeben? Das Ergebnis sieht dann so aus:

Ich verwende im Allgemeinen console.log, weil ich daran gewöhnt bin, aber ich denke, dass console.table in vielen Fällen besser funktioniert und das Objekt auf eine schöne, saubere und lesbare Weise für mich ausgibt.

Konsole.Assert

console.assert ist eine Methode, die eine Meldung auf der Konsole ausgibt, dass eine von Ihnen festgelegte Bedingung nicht erfüllt wurde. Die Funktion verwendet zwei Argumente: den auszuwertenden Ausdruck und die Fehlermeldung, die angezeigt werden soll. Hier ist ein Beispiel:

const obj = { restaurantName: 'Pizza Planet' };
console.assert(obj.restaurantName === 'Pizza Palace', 'Der Name des Restaurants ist nicht „Pizza Palace“');
// Behauptung fehlgeschlagen; „Der Name des Restaurants ist nicht „Pizza Palace““

Dies kann eine weitere sehr gute Möglichkeit zum Debuggen Ihres Programms sein. Die Meldung wird nur angezeigt, wenn die Behauptung fehlschlägt. Wenn also keine Meldung angezeigt wird, können Sie davon ausgehen, dass der Ausdruck korrekt ausgewertet wird.

console.group und console.groupEnd

console.group und console.groupEnd sind Möglichkeiten, viele console.log s logisch zu gruppieren. Sie können die Gruppe dann bei Bedarf ausblenden, indem Sie sie reduzieren. Ziemlich einfach zu bedienen:

konsole.gruppe();
console.log({ restaurantName: 'Pizza Palace' });
konsole.groupEnd();

Die Gruppe kann als Ganzes zusammengeführt werden. Dies kann nützlich sein, wenn Sie viele Dinge in der Konsole protokollieren müssen.

abschließend

In JavaScript stehen viele Methoden für das Konsolenobjekt zur Verfügung. Sie unterstützen uns bei der Entwicklung, sodass wir Nachrichten nach Typ filtern, ein oder mehrere Elemente in einer Tabelle anzeigen oder sie gruppieren oder reduzieren können, um sie bei Bedarf auszublenden. Es wird Ihren Arbeitsablauf verbessern.

Oben finden Sie weitere Details zu den Funktionen der JavaScript-Konsole. Weitere Informationen zur JavaScript-Konsole finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!