Beyond console.log(): 3 Ways to Format Console Outputs in JavaScript

#javascript #codenewbie #productivity

As JavaScript developers, we intuitively use console.log() to debug, print out variables, and log results of our current operations to make sure we are on the right programming path.

Indeed, console.log() seems powerful enough, but did you know there are other cool methods in the Console API that can also make your life easier?

Recently I came across console.table() in a tutorial, which prompted me to investigate alternative approaches to the plain-old console.log(). Here are 3 formatting tools that I have added to my debugging toolkit:

1. `console.table()`

As the name suggests, console.table() prints your output in a nicely formatted table, instead of a cluster of text from console.log().

Let's say we have an array of objects, each object containing multiple key-value pairs:

const inventors = [
  { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
  { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
  { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
  { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
  { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
  { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
  { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
  { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
  { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
  { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
  { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
  { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
]

Here's what they look like with console.table(inventors):

┌─────────┬─────────────┬───────────────┬──────┬────────┐
│ (index) │    first    │     last      │ year │ passed │
├─────────┼─────────────┼───────────────┼──────┼────────┤
│    0    │  'Albert'   │  'Einstein'   │ 1879 │  1955  │
│    1    │   'Isaac'   │   'Newton'    │ 1643 │  1727  │
│    2    │  'Galileo'  │   'Galilei'   │ 1564 │  1642  │
│    3    │   'Marie'   │    'Curie'    │ 1867 │  1934  │
│    4    │ 'Johannes'  │   'Kepler'    │ 1571 │  1630  │
│    5    │ 'Nicolaus'  │ 'Copernicus'  │ 1473 │  1543  │
│    6    │    'Max'    │   'Planck'    │ 1858 │  1947  │
│    7    │ 'Katherine' │  'Blodgett'   │ 1898 │  1979  │
│    8    │    'Ada'    │  'Lovelace'   │ 1815 │  1852  │
│    9    │ 'Sarah E.'  │    'Goode'    │ 1855 │  1905  │
│   10    │   'Lise'    │   'Meitner'   │ 1878 │  1968  │
│   11    │   'Hanna'   │ 'Hammarström' │ 1829 │  1909  │
└─────────┴─────────────┴───────────────┴──────┴────────┘

2. `console.group()` and `console.groupEnd()`

This pair of console methods allow you to create a hierarchical structure of your output. If you have a group of related data, you can wrap them inside console.group() and console.groupEnd(), like so:

console.group('Meat')
console.log('Chicken')
console.log('Pork')
console.log('Beef')
console.groupEnd('Meat')

console.group('Veggies')
console.log('Corn')
console.log('Spinach')
console.log('Carrots')
console.groupEnd('Veggies')

console.group('Fruits')
console.log('Apple')
console.log('Banana')
console.log('Tomato')
console.groupEnd('Fruits')

...and you will see a beautifully grouped set of output (feel free to try on a Chrome or Firefox console, it looks even prettier in my opinion):

Meat
  Chicken
  Pork
  Beef
Veggies
  Corn
  Spinach
  Carrots
Fruits
  Apple
  Banana
  Tomato

3. `console.dir()`

This one may or may not be as useful, depending on the browser you're on. Essentially, console.dir() prints out a hierarchical list of properties inside the specified JavaScript project.

For example, open your browser console and try console.dir() by passing in the following object:

const food = {
  'Meat': {
    'Chicken': ['grilled', 'fried'],
    'Pork': ['BBQ', 'steamed'],
    'Beef': ['medium', 'rare']
  },
  'Veggies': {
    'Corn': ['white', 'yellow'],
    'Spinach': ['regular', 'baby-size'],
    'Carrots': ['regular', 'bite-size']
  },
  'Fruits': {
    'Apple': ['green', 'red'],
    'Banana': ['raw', 'ripe'],
    'Tomato': ['big', 'small']
  },
}

In the Chrome console, you can see that console.dir(food) makes it easier to spot the data type than does console.log(food). Whereas in Firefox, both outputs appear the same.

Nonetheless, if you click on the triangle at the start of the output, both console.dir() and console.log() display nicely formatted JavaScript objects, neatly organized by property types and their values.

If you are already familiar with those three methods, I recommend checking out the following resources, experiment on each method mentioned in the articles, and let me know which ones you plan on using regularly.

Happy debugging!