# TIL: Some New Console Logging Tricks for Debugging

On Friday 2/15/2020 I had an awesome time hosting a Live Stream talking about *Debugging Strategies in JavaScript and Ruby On Rails*. You can catch the first part [Here On Twitch](https://www.twitch.tv/videos/552028180) and on the Zeal YouTube channel.

{% youtube EGjErCdpZEU %}

I wanted to share a couple of new neat things I learned from my co-workers Nate & Matti when doing good old `console.log` style debugging. 

## TIL #1 Using object literals when console logging variables

Normally when debugging and looking to print out values for a request to console I would do something like this
```javascript
let response = await fetch(`https://foaas.com/bag/${thing}`);
console.log(thing, response)
```
The output might end up looking something like this:
```javascript
// Log Outout
cookies 
Response { type: "cors", url: "https://foaas.com/bag/cookies", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, body: ReadableStream, bodyUsed: false }
```
This is fine and all but its not very structured and if you're like me you can forget the order of the values you are logging so you might do something like this:
```javascript
console.log('thing', thing)
console.log('response', response)
```
But not anymore! I have learned you can just as easily do this:
```javascript
console.log({thing, response})
```
Then you can get much more structured logging kinda like this:
```javascript
Object { thing: "cookies", response: Response }
```
So simple so clean.

## TIL #2 Using console.table to print out arrays of data

Now plenty of times I come across a scenario where I want to log arrays of data.
```javascript
console.log(thingsThatAreAwesome)
```
Then when I inspect what was logged it's going to look something like this:
![Image of using console log to print out an array of data](https://cdn.hashnode.com/res/hashnode/image/upload/v1679633655761/baed71ae-c977-434b-ab6f-710cac9e4c11.png)

But no longer do I have to look at arrays of data in such a barbaric way! Using `console.table` will give me the structure I need:
```javascript
console.table(thingsThatAreAwesome)
```
Prints out a beautiful table of information:
![Image of a table of data after using the console table to display an array of data](https://cdn.hashnode.com/res/hashnode/image/upload/v1679633656995/7f0983f1-1eb6-45f6-93be-4e9196c37958.png)

I hope these two TIL will help you in your next debugging adventure!