Day Learning JavaScript-APIs: Konsolen-API

JavaScript verfügt über eine Vielzahl integrierter APIs, die das Programmieren unterhaltsam und interessant machen. Aber seien wir ehrlich: Wie viele davon nutzen Sie tatsächlich in vollem Umfang? In den nächsten 30 Tagen befassen wir uns mit diesen APIs und besprechen, was sie sind und welche coolen Dinge Sie vielleicht verpasst haben. Von den Grundlagen bis hin zu fortgeschritteneren Dingen lernen Sie ganz nebenbei neue Tricks.

Fühlen Sie sich von JavaScript-APIs überfordert? Oder sind Sie vielleicht nur hier, um etwas Neues zu lernen? In jedem Fall ist diese Serie genau das Richtige für Sie.

Heute beginnen wir mit einer API, die Ihnen die ganze Zeit still und leise beim Debuggen geholfen hat: der Konsolen-API. Sicher, Sie haben console.log() schon einmal verwendet, aber es kann noch viel mehr. Lassen Sie uns einige seiner versteckten Tricks aufdecken!

Was ist die Konsolen-API?

Die Konsolen-API ist eine Sammlung äußerst nützlicher Methoden, die das Debuggen, Protokollieren und Visualisieren Ihrer Daten erleichtern.

Aber seien wir ehrlich – Sie sind wahrscheinlich auf die Verwendung von console.log() für alles angewiesen. Es ist an der Zeit, mit dieser Gewohnheit auszubrechen, denn diese API kann noch viel mehr.

Hier sind einige coole Dinge, die Sie verpasst haben:

Coole Dinge, die Sie mit der Konsolen-API machen können

1. Daten in Tabellen anzeigen

Haben Sie jemals das Gefühl gehabt, dass Ihre Protokolle nur ein Durcheinander von Text sind, den Sie nicht verstehen können? console.table() steht Ihnen zur Seite.

So sehen Ihre Protokolle derzeit wahrscheinlich aus:

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);

Ergebnis:

Jetzt lasst uns das aufräumen:

console.table(fruits);

Ergebnis:

Viel besser, oder? Es ist einfacher zu lesen und jetzt ergeben Ihre Daten tatsächlich auf einen Blick einen Sinn.

2. Stoppen Sie das Schreiben redundanter If-Anweisungen mit console.assert()

Heben Sie Ihre Hand, wenn Sie ein Dutzend if-Anweisungen geschrieben haben, nur um Fehler zu protokollieren. Nun, hör auf damit! console.assert() ist hier, um den Tag zu retten.

Stattdessen:

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

Versuchen Sie Folgendes:

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

Wenn die Bedingung falsch ist, wird die Nachricht protokolliert. So einfach, oder?

3. Code-Leistung messen

Sind Sie neugierig, wie lange die Ausführung eines Codeblocks dauert? Begrüßen Sie console.time() und console.timeEnd().

So können Sie die Leistung messen:

console.time("Loop Timer");
for (let i = 0; i < 1_000_000; i++) {}
console.timeEnd("Loop Timer");

Ergebnis:

Jetzt können Sie herausfinden, was Ihre App verlangsamt!

4. Zählen Sie, wie oft ein Block ausgeführt wird

Haben Sie sich jemals gefragt, wie oft ein Code ausgeführt wird? Es kann schwierig sein, manuell den Überblick zu behalten, insbesondere wenn Ihr Code immer komplexer wird. Hier kommt console.count() zum Einsatz.

Stellen Sie sich dieses Szenario vor:

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);

Auf den ersten Blick lässt sich leicht erkennen, wie oft die Begrüßung für Namen läuft, die mit „A“ beginnen. Aber wenn sich Ihre Logik erweitert, verlieren Sie möglicherweise den Überblick.

Jetzt vereinfachen wir die Dinge mit console.count():

console.table(fruits);

Hier ist, was passiert:

• Jedes Mal, wenn ein Name begrüßt wird, der mit „A“ beginnt, erhöht console.count() die Anzahl und beschriftet ihn mit „Begrüßung von Benutzern, die mit A beginnen.“
• Nach dem Zurücksetzen mit console.countReset() beginnt die Zählung erneut.

Kein Raten mehr oder das Hinzufügen von Druckanweisungen im gesamten Code mehr. Nur eine Zeile, und Sie haben alles im Griff!

5. Stilen Sie Ihre Protokolle mit CSS

Manchmal müssen Ihre Protokolle platzen. Verwenden Sie %c, um Ihre Protokolle mit CSS zu gestalten und sie hervorzuheben.

Beispiel:

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

Ergebnis:

Heben Sie Fehler und Warnungen hervor oder haben Sie einfach Spaß mit Ihren Protokollen.

6. Zusammengehörige Protokolle gruppieren

Müden Sie es, durch endlose Protokolle zu scrollen? Verwenden Sie console.group(), um zusammengehörige Protokolle zu gruppieren.

Hier ist ein Beispiel:

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

Ausgabe:

console.time("Loop Timer");
for (let i = 0; i < 1_000_000; i++) {}
console.timeEnd("Loop Timer");

Sie können auch console.groupCollapsed() verwenden, um Gruppen standardmäßig minimiert zu halten.

Zusammenfassung

Die Konsolen-API ist viel leistungsfähiger als Sie denken. Von Tabellen bis hin zu Leistungsmessungen, Zählern, Stilen und Gruppierungen gibt es für fast jedes Debugging-Szenario ein Tool.

Dies ist nur Tag 1 unserer Serie 30 Tage JavaScript-APIs. Wenn Sie dies hilfreich fanden, setzen Sie ein Lesezeichen für diesen Artikel für später und bleiben Sie dran – es gibt noch so viel mehr zu lernen!

Und hey, wenn Sie Fragen haben, schreiben Sie mir gerne eine Nachricht auf Twitter unter @sprucekhalifa. Vergessen Sie nicht, mir für weitere Einblicke und Updates zu folgen. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonDay Learning JavaScript-APIs: Konsolen-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!