Das Protokollieren von Nachrichten auf der Konsole ist eine sehr einfache Möglichkeit, kleinere Probleme in Ihrem Code zu diagnostizieren und zu beheben.
Aber wussten Sie, dass console mehr ist als nur log? In diesem Artikel zeige ich Ihnen, wie Sie in JS auf der Konsole drucken, sowie all die Dinge, die Sie nicht wussten console tun könnten.
Firefox Multi-line Editor Console
Wenn Sie noch nie den mehrzeiligen Editor-Modus in Firefox verwendet haben, sollten Sie es jetzt versuchen!,
Öffnen Sie einfach die Konsole, Ctrl+Shift+K oder F12, und oben rechts sehen Sie eine Schaltfläche mit der Aufschrift“In den mehrzeiligen Editor-Modus wechseln“. Alternativ können Sie Ctrl+Bdrücken.
Dies gibt Ihnen einen mehrzeiligen Code-Editor direkt in Firefox.
Konsole.log
Beginnen wir mit einem sehr einfachen Protokollbeispiel.
let x = 1console.log(x)Geben Sie das in die Firefox-Konsole ein und führen Sie den Code aus. Sie können auf die Schaltfläche „Ausführen“ klicken oder Ctrl+Enterdrücken.
In diesem Beispiel sollten wir „1“ in der Konsole sehen., Ziemlich unkompliziert, oder?
Mehrere Werte
Wussten Sie, dass Sie mehrere Werte einschließen können? Fügen Sie am Anfang eine Zeichenfolge hinzu, um leicht zu erkennen, was Sie protokollieren.
let x = 1console.log("x:", x)Aber was ist, wenn wir mehrere Werte haben, die wir wollen, zu melden?
let x = 1let y = 2let z = 3Anstatt console.log() dreimal einzugeben, können wir sie alle einschließen. Und wir können eine Zeichenfolge vor jedem von ihnen hinzufügen, wenn wir wollten, auch.
let x = 1let y = 2let z = 3console.log("x:", x, "y:", y, "z:", z)Aber das ist zu viel Arbeit. Wickeln Sie sie einfach mit geschweiften Klammern ein!, Jetzt erhalten Sie ein Objekt mit den benannten Werten.
let x = 1let y = 2let z = 3console.log( {x, y, z} )Mit einem Objekt können Sie dasselbe tun.
let user = { name: 'Jesse', contact: { email: '[email protected]' }}console.log(user)console.log({user})Das erste Protokoll druckt die Eigenschaften innerhalb des Benutzerobjekts. Die zweite identifiziert das Objekt als „Benutzer“ und druckt die Eigenschaften darin.
Wenn Sie viele Dinge an der Konsole protokollieren, kann dies Ihnen helfen, jedes Protokoll zu identifizieren.
Variablen im Protokoll
Wussten Sie, dass Sie Teile Ihres Protokolls als Variablen verwenden können?,
console.log("%s is %d years old.", "John", 29)In diesem Beispiel bezieht sich %s auf eine nach dem Anfangswert enthaltene Zeichenfolgenoption. Dies würde sich auf „John“beziehen.
Die bezieht sich auf eine Ziffernoption, die nach dem Anfangswert enthalten ist. Dies würde sich auf 29 beziehen.
Die Ausgabe dieser Aussage wäre: „John ist 29 Jahre alt.“.
Variationen von Protokollen
Es gibt einige Variationen von Protokollen. Es ist die am weitesten verbreitete console.log(). Aber es gibt auch:
Diese Variationen fügen unseren Protokollen in der Konsole Styling hinzu., Zum Beispiel wird die warn gelb und die error rot gefärbt.
Hinweis: Die Stile variieren von browser zu browser.
Optionale Protokolle
Wir können Nachrichten mit console.assert()bedingt an die Konsole drucken.
let isItWorking = falseconsole.assert(isItWorking, "this is the reason why")Wenn das erste Argument falsch ist, wird die Nachricht protokolliert.
Wenn wir isItWorking in true ändern würden, wird die Nachricht nicht protokolliert.
Zählen
Wussten Sie, dass Sie mit der Konsole zählen können?,
for(i=0; i<10; i++){ console.count()}Jede Iteration dieser Schleife gibt eine Zählung an die Konsole aus. Sie werden sehen „standard: 1, standard: 2“, und so weiter, bis es erreicht 10.
Wenn Sie dieselbe Schleife erneut ausführen, sehen Sie, dass die Anzahl dort ansteigt, wo sie aufgehört hat; 11 – 20.
Um den Zähler zurückzusetzen, können wir console.countReset().
Und wenn Sie den Zähler auf etwas anderes als „Standard“ benennen möchten, können Sie!
for(i=0; i<10; i++){ console.count('Counter 1')}console.countReset('Counter 1')Nachdem wir nun eine Beschriftung hinzugefügt haben, sehen Sie“ Zähler 1, Zähler 2 “ usw.,
Und um diesen Zähler zurückzusetzen, müssen wir den Namen in countReset. Auf diese Weise können Sie mehrere Zähler gleichzeitig ausführen und nur bestimmte zurücksetzen.
Track Zeit
Neben zählen, sie können auch zeit etwas wie eine stoppuhr.
Um einen Timer zu starten, können wir console.time(). Dies wird nichts von selbst tun. In diesem Beispiel verwenden wir also setTimeout(), um den ausgeführten Code zu emulieren. Dann stoppen wir innerhalb des Timeouts unseren Timer mit .,
console.time()setTimeout(() => { console.timeEnd()}, 5000)Wie zu erwarten, haben wir nach 5 Sekunden ein Timer-Endprotokoll von 5 Sekunden.
Wir können auch die aktuelle Uhrzeit unseres Timers protokollieren, während er läuft, ohne ihn zu stoppen. Dazu verwenden wir console.timeLog().
console.time()setTimeout(() => { console.timeEnd()}, 5000)setTimeout(() => { console.timeLog()}, 2000)In diesem Beispiel erhalten wir zuerst unsere 2 Sekunden timeLog, dann unsere 5 Sekunden timeEnd.
Genau wie der Zähler können wir Timer beschriften und mehrere gleichzeitig ausführen lassen.,
Gruppen
Eine andere Sache, die Sie mit log tun können, ist gruppieren Sie sie. ?
Wir starten eine Gruppe mit console.group(). Und wir beenden eine Gruppe mit .
Diese Gruppe von Protokollen ist zusammenklappbar. Dies macht es einfach, Sätze von Protokollen zu identifizieren.
Standardmäßig ist die Gruppe nicht reduziert. Sie können es auf collapsed setzen, indem Sie console.groupCollapsed() anstelle von console.group().
Beschriftungen können auch an die group() übergeben werden, um sie besser zu identifizieren.,
StackTrace
Sie können auch einen stack-trace mit console. Fügen Sie es einfach in eine Funktion.
function one() { two()}function two() { three()}function three() { console.trace()}one()In diesem Beispiel haben wir sehr einfache Funktionen, die sich nur gegenseitig aufrufen. Dann rufen wir in der letzten Funktion console.trace().
Tabellen
Hier ist eine der umwerfendsten Anwendungen für die Konsole: console.table().,
Lassen Sie uns also einige Daten zum Protokollieren einrichten:
let devices = Jetzt protokollieren wir diese Daten mit console.table(devices).
Aber warte-es wird besser!
Wenn wir nur die Marken wollen, nur console.table(devices, )!
Wie wäre es mit einem komplexeren Beispiel? In diesem Beispiel verwenden wir jsonplaceholder.
Hier drucken wir nur den „Namen“ und „E-Mail“., Wenn Sie alle Daten, werden Sie sehen, dass es viele weitere Eigenschaften für jeden Benutzer gibt.
Stil ?
Wussten Sie, dass Sie CSS-Eigenschaften verwenden können, um Ihre Protokolle zu formatieren?
Dazu verwenden wir %c um anzugeben, dass Stile hinzugefügt werden müssen. Die Stile werden an das zweite Argument der logübergeben.
console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")Sie können dies verwenden, um Ihre Protokolle hervorzuheben.,
Löschen
Wenn Sie versuchen, ein Problem mithilfe von Protokollen zu beheben, werden Sie möglicherweise häufig aktualisiert und Ihre Konsole wird möglicherweise überladen.
Fügen Sie einfach console.clear() oben in Ihrem Code hinzu und Sie erhalten bei jeder Aktualisierung eine neue Konsole. ?
Fügen Sie es einfach nicht zum Ende Ihres Codes hinzu, lol.
Danke fürs Lesen!
Wenn Sie wollen zu überarbeiten die Konzepte in diesem Artikel mit video, können Sie prüfen, diese video-version, die ich hier gemacht.,
Ich komme aus Texas. Schauen Sie sich meine anderen Inhalte an und lassen Sie mich wissen, wie ich Ihnen auf Ihrem Weg zum Webentwickler helfen kann.
- Abonniere Mein YouTube
- Sag Hallo! Instagram / Twitter
- Melde dich für meinen Newsletter an