Photo by Markus Spiske @unsplash

Read this article on my blog

Today I wanted to share with you a few tips about the one and only console object, which provides access to the browser debugging console for developers. I have been using it since the very first time I learned about web development (about 10 years ago), and I have learned some useful tips along the way to be more efficient while using it. Without further ado, let's dive in.

Output types

Let's start with the basics, which is controlling the type of output when printing messages in the browser console. console.log being the generic output, it can be useful to know how to be more specific:

• ℹ️ Information: console.info()
• ⚠️ Warning: console.warn()
• 🚨 Error: console.error()

I personally don't use console.info that much, but I definitely use warn and error a lot, for example when a call to an API went wrong.

Formatting

Simple variables

Quite often, we want to console.log variables values, to understand what's going on at some point in our code. There are a few options here:

const userName = "foo"
const userEmail = "foo@bar.com"

// TIP: `console.log` accepts any number of arguments, it will just concatenate a `toString()` representation of each argument to the console
console.log("user is ", userName, userEmail)
// > user is foo foo@bar.com

// You can also use template literal strings:
console.log(`user is ${userName} ${userEmail}`)
// > user is foo foo@bar.com

Objects

When printing objects or arrays, most of the time console.log will do the job, but I found out that using console.dir can provide the developer with a better view of the printed object. The behaviors of these methods can differ slightly from a browser to another, but the main difference is that console.log will print a toString representation of the object, while console.dir will print a navigable tree. This is particularly true when printing out DOM objects with Chrome, as shown by the screenshot below:

Tabular data

Finally, depending on the data you're working with, sometimes a table view can be way more practical than a tree view. This one can save you a lot of "click click click" 😇. Let's take a look at this simple example. We have this array of objects, representing our users, and we want to print it in the browser console:

const users = [
  { username: "foo", email: "foo@foo.com", isActive: true },
  { username: "bar", email: "bar@bar.com", isActive: false },
  { username: "joe", email: "joe@gmail.com", isActive: true },
]

Here's what the output will be in the console, using console.log versus console.table:

Pretty neat, right?

Styling

Who said console outputs need to be plain and sad? console.log method actually supports inline styling, and I think this is really cool:

Sexy, isn't it? Here is how it works: you just need to prefix your message with "%c", and pass inline CSS rules as the second argument.

console.log("%c <message>", "<inline CSS>")

// Example
console.log("%c hello world", "color: white; background-color: tomatoe")

If you wanna go wild with CSS3, well, you can!

var styles = [
  "background: linear-gradient(#035E7B, #62B6CB)",
  "border: 1px solid white",
  "color: white",
  "display: block",
  "text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)",
  "box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset",
  "line-height: 40px",
  "text-align: center",
  "font-weight: bold",
]

console.log("%c This is a really sexy message", styles.join(";"))

Debugging

Seeing the meme at the beginning of this post, you might have wondered...

Is console.trace really a thing?

Yes it is, and it can come up quite handy in certain situations:

The console interface's trace() method outputs a stack trace to the Web Console.

This can help you get a better understanding of what's going on, which methods are called in which order, and where it's crashing. But there is a better way: our friend the debugger!

Depending on your project/editor configuration, it can be a bit tricky to run a debug mode. Luckily for us, the Chrome dev-tools provide a very useful command to pause the execution of our code and inspect variables:

function saveUser(user) {
  // ...
  debugger // Yep, it doesn't get much easier
  // ...
}

This will open up the JavaScript debugging pane of the developer tools, allowing you to inspect, step into the next function call, resume execution, etc. For more information about the Chrome DevTools debugger, check out this great article.