# `console.log` like a pro

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.

![console trace meme](https://cdn.hashnode.com/res/hashnode/image/upload/v1618825134126/wapXCKyZp.png)

# 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()`

![output types](https://cdn.hashnode.com/res/hashnode/image/upload/v1618825285574/PI7QRb_6C.png)

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:

```javascript
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:

![console.log vs console.dir](https://cdn.hashnode.com/res/hashnode/image/upload/v1618825352635/XNf3099CP.png)

### 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:

```javascript
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`:

![console.log vs console.table](https://cdn.hashnode.com/res/hashnode/image/upload/v1618825394289/bE_CwzyGZ.png)

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:

![console log colors](https://cdn.hashnode.com/res/hashnode/image/upload/v1618825554269/g0hhX3GvC.png)

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.

```javascript
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!

```javascript
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(";"))
```

![console log css3](https://cdn.hashnode.com/res/hashnode/image/upload/v1618825573648/z351y_O0c.png)

# 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:

```javascript
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](https://developer.chrome.com/docs/devtools/javascript/).