Explore the Console Object for Enhanced JavaScript Debugging

console.log is one of the handiest tools in the JavaScript developers toolkit. You can use it to inspect the data you are working with during different points in the data flow you're exploring.

But...

If you're only using console.log, you are missing out on the full power of the console object. There are many properties that console comes with and we'll be doing a brief exploration of each:

console.info: Outputs an informational message to the console. In the browser, these messages are typically unstyled.
console.warn: Outputs a warning message. In the browser, it's usually accompanied by an exclamation mark and a stack trace.
console.error: Outputs an error message with a stack trace.
console.assert: Takes a condition and outputs a message if the condition is false, useful for assertions in code.
console.clear: Clears the console, useful when the console is overcrowded with logs.
console.count: Logs the number of times that this particular call to count() has been called, useful for tracking how often a block of code is executed.
console.time / console.timelog / console.timeEnd: Allows for basic performance monitoring by starting a timer, logging the elapsed time, and stopping the timer.
console.group / console.groupEnd: Groups together a series of console messages, indenting them for better readability.
console.table: Displays tabular data as a table, making it easier to read complex object structures.
console.dir: Provides an interactive listing of the properties of a specified JavaScript object, useful for inspecting objects.
console.trace: Outputs a stack trace to the console, which can help track down where a function was called.

Each of these methods can be used to streamline the process of debugging JavaScript code, whether you're working in a browser or in a Node.js environment. Using these methods appropriately can help you understand your code's behavior and find errors more quickly.

Transcript

[00:00] With it, we can log strings, we can log objects, we can log arrays, and any other data type that we want to see. But if you've only ever used a log method of the console object, you've been missing out. Firstly, we have console.info, warn, and error.

[00:18] When working in Node, these don't make much difference. But when using the browser's tools, these are styled slightly differently. info will be unstyled, warn will have an exclamation mark and also comes with a call stack, as is error.

[00:33] We could also have our log filter out warnings or errors and have more control over what's going on. Sometimes you'll want to assert that something is true, and console.assert does just that. It takes a condition, so let's test name equals Kevin, and if it's false, we can pass in a message.

[00:51] So here I'm asserting that the name is set to Kevin, and I've got an error message, not the right name, only if the assertion fails. So as soon as I change this from Kevin to Kath, I'm going to get an assertion field and an assertion message.

[01:06] This can be super helpful when we're debugging, because we can test the values and only log when it doesn't match our expectations. When the console starts to get a little busy, we get console.clear, which allows us to clear the console. We've also got console.count. This can be super handy to check how often a function is called.

[01:26] So I've created a function called counting. If it equals zero, I'm going to return. Otherwise, I'll invoke my count and decrement by one. Now, you notice it gets from one to eleven, and that's because I've called console.count before. But if I pass in a string, I can have a separate counter.

[01:42] And so we can have multiple counters going on throughout our code, so we can be counting things without having to create variables, log those variables out, and use those in different ways. We also have the ability to time. So console.time and console.timelog, which will print the current time,

[02:00] or console.timeend, which will print the current time and then end the timer, can show us how long it takes to run a piece of code. So from when I invoked this timer to when I ended the timer, I see it's 0.6 milliseconds. We can use timing functions to help us find ways to optimize our code, to test it before we over-optimize.

[02:20] Next, we've got console.group. Console.group groups together a series of console.log messages. So we've got console.group, which is bracketed with console.groupend. And any log message inside of here, so name, Kevin, location, Northern Ireland, will be helpfully indented,

[02:38] and we can see them more easily in our console. So console.group is really helpful to be able to group together log messages that have a common purpose. If I have a user object, we know that we can console.log that. But there's another method that we can pass an object to, which is console.table,

[02:57] which creates a table from the key values, which allows us to be able to see the data more clearly. It also gives us the same object logged out, so we get both. Console.dir gives us an interactive list of the properties of a specified JavaScript object. So we can pass in any object that we're currently working with,

[03:17] and we can get logged out an interactive list of its properties that we can explore in our console. And last but not least, console.trace will give us a stack trace wherever we are in our code. So even without throwing an error, we can see a stack trace to see what's going on. So there we go. Don't just use console.log.

[03:36] Use info.warn and error to be able to format your messages differently. Assert to test that the values are what you expect them to be. Clear to clear the console if it's getting too much. Count to create one or more counters to know when code's being invoked.

[03:51] Time, time.log and time.end to be able to profile your code. Group and group.end to be able to group together similar console messages. Table to be able to see an object in a table mode. Dir to have an interactive list of properties. And trace to be able to get a stack trace at any point in your code.