Das Protokollieren von Nachrichten an der Konsole ist eine sehr einfache Methode, um kleinere Probleme in Ihrem Code zu diagnostizieren und zu beheben.
Aber wussten Sie, dass es mehr consoleals nur gibt log? In diesem Artikel zeige ich Ihnen, wie Sie in JS auf der Konsole drucken und was Sie nicht wissen console.
Firefox Multi-Line Editor Console
Wenn Sie den mehrzeiligen Editor-Modus in Firefox noch nie verwendet haben, sollten Sie ihn jetzt ausprobieren!
Öffnen Sie einfach die Konsole Ctrl+Shift+Koder F12, und oben rechts sehen Sie eine Schaltfläche mit der Aufschrift "In den mehrzeiligen Editor-Modus wechseln". Alternativ können Sie drücken Ctrl+B.
Dies gibt Ihnen einen mehrzeiligen Code-Editor direkt in Firefox.
console.log
Beginnen wir mit einem sehr einfachen Protokollbeispiel.
let x = 1 console.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 drücken Ctrl+Enter.
In diesem Beispiel sollte "1" in der Konsole angezeigt werden. Ziemlich einfach, oder?
Mehrere Werte
Wussten Sie, dass Sie mehrere Werte einschließen können? Fügen Sie am Anfang eine Zeichenfolge hinzu, um leicht zu identifizieren, was Sie protokollieren.
let x = 1 console.log("x:", x)Aber was ist, wenn wir mehrere Werte haben, die wir protokollieren möchten?
let x = 1 let y = 2 let z = 3Anstatt console.log()dreimal zu tippen, können wir sie alle einschließen. Und wir können vor jedem einen String hinzufügen, wenn wir wollen.
let x = 1 let y = 2 let z = 3 console.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 genannten Werten.
let x = 1 let y = 2 let z = 3 console.log( {x, y, z} )
Sie können dasselbe mit einem Objekt tun.
let user = { name: 'Jesse', contact: { email: '[email protected]' } } console.log(user) console.log({user})Das erste Protokoll druckt die Eigenschaften innerhalb des Benutzerobjekts. Der zweite identifiziert das Objekt als "Benutzer" und druckt die darin enthaltenen Eigenschaften.
Wenn Sie viele Dinge in 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 wird %sauf eine Zeichenfolgenoption verwiesen, die nach dem Anfangswert steht. Dies würde sich auf "John" beziehen.
Das %dbezieht sich auf eine Ziffernoption, die nach dem Anfangswert enthalten ist. Dies würde sich auf 29 beziehen.
Das Ergebnis 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(). Es gibt aber auch:
console.log('Console Log') console.info('Console Info') console.debug('Console Debug') console.warn('Console Warn') console.error('Console Error') Diese Variationen verleihen unseren Protokollen in der Konsole Stil. Zum Beispiel warnwird das gelb und das errorrot gefärbt.
Hinweis: Die Stile variieren von Browser zu Browser.
Optionale Protokolle
Mit können wir bedingt Nachrichten an die Konsole drucken console.assert().
let isItWorking = false console.assert(isItWorking, "this is the reason why")Wenn das erste Argument falsch ist, wird die Nachricht protokolliert.
Wenn wir etwas ändern isItWorkingzu true, dann wird die Nachricht nicht protokolliert werden.
Zählen
Wussten Sie, dass Sie mit der Konsole zählen können?
for(i=0; i<10; i++){ console.count() }Bei jeder Iteration dieser Schleife wird eine Anzahl an die Konsole ausgegeben. Sie sehen "Standard: 1, Standard: 2" usw., bis 10 erreicht ist.
Wenn Sie dieselbe Schleife erneut ausführen, werden Sie feststellen, dass die Zählung dort fortgesetzt wird, wo sie aufgehört hat. 11 - 20.
Um den Zähler zurückzusetzen, können wir verwenden console.countReset().
And, if you want to name the counter to something other than "default", you can!
for(i=0; i<10; i++){ console.count('Counter 1') } console.countReset('Counter 1')Now that we have added a label, you will see "Counter 1, Counter 2", and so on.
And to reset this counter, we have to pass the name into countReset. This way you can have several counters running at the same time and only reset specific ones.
Track Time
Besides counting, you can also time something like a stopwatch.
To start a timer we can use console.time(). This will not do anything by itself. So, in this example, we will use setTimeout() to emulate code running. Then, within the timeout, we will stop our timer using console.timeEnd().
console.time() setTimeout(() => { console.timeEnd() }, 5000)As you would expect, after 5 seconds, we will have a timer end log of 5 seconds.
We can also log the current time of our timer while it's running, without stopping it. We do this by using console.timeLog().
console.time() setTimeout(() => { console.timeEnd() }, 5000) setTimeout(() => { console.timeLog() }, 2000)In this example, we will get our 2 second timeLog first, then our 5 second timeEnd.
Just the same as the counter, we can label timers and have multiple running at the same time.
Groups
Another thing that you can do with log is group them. ?
We start a group by using console.group(). And we end a group with console.groupEnd().
console.log('I am not in a group') console.group() console.log('I am in a group') console.log('I am also in a group') console.groupEnd() console.log('I am not in a group')This group of logs will be collapsible. This makes it easy to identify sets of logs.
By default, the group is not collapsed. You can set it to collapsed by using console.groupCollapsed() in place of console.group().
Labels can also be passed into the group() to better identify them.
Stack Trace
You can also do a stack trace with console. Just add it into a function.
function one() { two() } function two() { three() } function three() { console.trace() } one() In this example, we have very simple functions that just call each other. Then, in the last function, we call console.trace().
Tables
Here's one of the most mind-blowing uses for console: console.table().
So let's set up some data to log:
let devices = [ { name: 'iPhone', brand: 'Apple' }, { name: 'Galaxy', brand: 'Samsung' } ]Now we'll log this data using console.table(devices).
But wait – it gets better!
If we only want the brands, just console.table(devices, ['brand'])!
How about a more complex example? In this example, we'll use jsonplaceholder.
async function getUsers() { let response = await fetch('//jsonplaceholder.typicode.com/users') let data = await response.json() console.table(data, ['name', 'email']) } getUsers()Here we are just printing the "name" and "email". If you console.log all of the data, you will see that there are many more properties for each user.
Style ?
Did you know that you can use CSS properties to style your logs?
Zu diesem Zweck %cgeben wir an, dass Stile hinzugefügt werden müssen. Die Stile werden in das zweite Argument des übergeben log.
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.
klar
Wenn Sie versuchen, ein Problem mithilfe von Protokollen zu beheben, werden Sie möglicherweise häufig aktualisiert, und Ihre Konsole ist möglicherweise überfüllt.
Fügen Sie einfach console.clear()oben in Ihren Code ein und Sie erhalten bei jeder Aktualisierung eine neue Konsole. ?
Fügen Sie es einfach nicht am Ende Ihres Codes hinzu, lol.
Danke fürs Lesen!
Wenn Sie die Konzepte in diesem Artikel per Video überarbeiten möchten, können Sie sich diese Video-Version ansehen, die ich hier erstellt habe.
Ich bin Jesse 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
- Melden Sie sich für meinen Newsletter an