• Zuhause
  • Artikel
  • Das Console-Objekt bietet Zugriff auf die Debugging-Konsole des Browsers.
Veröffentlicht am 06-05-2019

JavaScript-Konsole ist mehr als console.log ()

Eine der einfachsten Methoden von JavaScript zur Problembehandlung ist das Protokollieren von Daten mithilfe von console.log. Die Konsole bietet jedoch viele andere Methoden, mit denen Sie besser debuggen können.

Beginnen wir damit. Die Protokollierung einer Zeichenfolge oder vieler JavaScript-Objekte ist der grundlegende Anwendungsfall.

Genau wie dieser,

console.log ('Wo bin ich?');

Nehmen wir an, wir haben ein Szenario, in dem wir viele Objekte haben und diese in der Konsole anmelden müssen.

const foo = {id: 1, Höhe: '200px', Breite: '100px'};
const bar = {id: 2, height: '250px', Breite: '200px'};

Nur console.log (variable) nacheinander ist die intuitivste Art, dies zu protokollieren. Wenn wir sehen, wie es auf der Konsole erscheint, wird das Problem deutlicher.

Variablennamen sind nicht sichtbar

Wie Sie sehen, sind Variablennamen nicht sichtbar. Manchmal wird es hart oder lästig, wenn Sie viele Ausgaben haben und nacheinander erweitern müssen, um zu ermitteln, um welches Objekt oder welche Variable es sich handelt.

Eine Lösung, die dies verhindert, ist die Verwendung von console.log:

console.log ({foo, bar});

Dies reduziert auch die Anzahl der Console.log-Zeilen in unserem Code.

console.warn () & console.error ()

Je nach Situation können Sie Protokolle mit console.warn () oder console.error () hinzufügen, um sicherzustellen, dass Ihre Konsole lesbarer ist. In einigen Browsern zeigt console.info () auch das Symbol "i" an.

console.error () und console.warn ()

console.group ()

Dies kann zum Gruppieren oder Schachteln relevanter Details verwendet werden, damit Sie die Protokolle problemlos lesen können.

Dies kann auch verwendet werden, wenn innerhalb einer Funktion einige Protokollanweisungen vorhanden sind und der Geltungsbereich jeder Anweisung deutlich sichtbar sein soll.

Wenn Sie beispielsweise die Details eines Einkaufswagens protokollieren:

console.table ()

Wir können diesen Schritt noch weiter gehen, indem wir alle in einer Tabelle zusammenfassen, um sie lesbarer zu machen. Verwenden Sie console.table () jedes Mal, wenn Sie Objekte mit gemeinsamen Eigenschaften oder ein Array von Objekten haben. Console.table ({foo, bar}) kann hier verwendet werden und die Konsole zeigt Folgendes an:

console.table ()

console.trace ()

Daraufhin wird der Anrufpfad angezeigt, mit dem Sie den Punkt erreichen, an dem Sie console.trace () aufrufen

console.time ()

Startet einen Timer, mit dem Sie verfolgen können, wie lange ein Vorgang dauert. Sie geben jedem Zeitgeber einen eindeutigen Namen. Auf einer Seite können bis zu 10.000 Zeitgeber ausgeführt werden. Wenn Sie console.timeEnd () mit demselben Namen aufrufen, gibt der Browser die Zeit in Millisekunden aus, die seit dem Start des Timers vergangen ist.

console.time ()

console.clear ()

Löscht die Konsole. Der Inhalt der Konsole wird durch eine Informationsmeldung wie "Konsole wurde gelöscht" ersetzt.

console.dir ()

Mit console.dir können Sie alle Eigenschaften eines angegebenen JavaScript-Objekts in der Konsole anzeigen, wodurch wir die Eigenschaften des Objekts problemlos abrufen können.

Gerne lernen?

Folge mir auf Twitter, wo ich alles über die neuesten und besten JavaScript, AI, DevOps, VR / AR, Technologie und Wissenschaft schreibe Verbinden Sie sich mit mir auch auf LinkedIn!

Siehe auch

Der Markt für 5G Fixed Wireless Access (FWA) wird im Verlauf des Jahres 2018.2025 erhebliche Wachstumsperspektiven widerspiegelnBranche: Netzwerkautomation: Globale Markttrends 2019, Wachstum, Anteil, Größe und Prognose 2025…Der Dell Support ist eine Anlaufstelle für das Dell-Speicherupgrade und Probleme!Aus diesem Grund sind Drohnenbilder jetzt für Ihre Zitrusfarm von entscheidender Bedeutung3 Art des MonitorbildschirmsEZ MedBuy verkauft erstklassiges Mobility Scooter-Zubehör