Journals give us a window into the past, helping us discern what happened when and what the outcome was. We keep journals, traditionally, by writing things down with a timestamp (which could just be a date).
In programming, logging is like journaling. It records a history of a running application that we can revisit, giving us insight into what was happening at a given point in time.
Logging lets us revisit our application as if it was running. It's a useful tool for tracking bugs, performance, and generally ensuring that our applications are chugging along.
Open the console in your browser of choice.
Top Tip: If you already have the console open but you find that it's getting a little cluttered, you can clear it out by clicking the "Clear console" button — it looks like this in Chrome:
Alternatively, you can press
l to make your console look fresh and new.
console in the console (that's a little funky to say, huh?) and press "enter". In Chrome, you'll see something like
This is all probably a bit mystifying at the moment. You can explore that console thing (psst: it's an object, which we'll learn more about later), but feel free to move on to learn about how we use it.
console.log() is an all-purpose logging method. (A method or a function is a bit of code that does something. We call them when we want them to act.) In programming, logging refers to the process of printing information about the program as it runs. Try it out!
console.log("I'm logging! I'm a regular lumberjack!")
You can pass any number of messages to
console.log() by separating them with commas; when printed, they'll be separated by a space:
console.log('one', 'two', 'three')
When you enter the above in your console, you'll see "one two three".
And you don't just have to pass strings to
console.log() — try this:
console.log("I must have logged", 1000, "times today.")
You should see "I must have logged 1000 times today."
console.error() prints an error and usually includes a stack trace. A "stack trace" is a report of code that was executed at a certain time (in this case, starting from when the error occurred and working backwards). Enter the following in your console:
console.error('Danger, Will Robinson!')
You should see something like
You can pass several messages at once, separated by a comma:
console.error("Danger!", "Something bad happened!", "Time to debug!")
When printed, there will be a space after each message:
"Danger! Something bad happened! Time to debug!".
You might ask why we'd ever need to use this — isn't the goal of writing good code to avoid errors? Well, sure, but sometimes errors are out of our control: the network could go down, data could change, or a user could enter something invalid. In these cases, it's helpful to report not only what happened (which logging generally is good for) but also what kind of thing happened — in these cases, it was an error, so we use
console.warn() does as its name suggests: it prints a warning. We can use
console.warn() to, well, warn developers that an action they've taken might not be wise — one common use-case is giving developers a heads-up that some of the code they've written might no longer be supported.
console.warn('Hm, you might not want to do that.')
It might be a while before you find yourself needing to use
console.warn() — but you should think of it every time you see those yellow messages in the browser's console!
console.error(), we use
console.warn() to indicate in our log history that something undesirable happened, but it shouldn't have broken anything (unlike an error, which could break things). Warnings, as mentioned above, could give us insight into things that might break in the future or actions that worked but maybe shouldn't have — just like in real life!
console has tons (or tonnes for some folks) of useful functionality — be sure to explore! Logging info, errors, warnings, and stack traces is essential to staying on top of your application's functionality.