DEV Community

loading...

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

Annie Liao
Hybrid developer/designer currently exploring a variety of front-end magic.
・3 min read

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 }
]
Enter fullscreen mode Exit fullscreen mode

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  
└─────────┴─────────────┴───────────────┴──────┴────────┘
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

...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
Enter fullscreen mode Exit fullscreen mode

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']
  },
}
Enter fullscreen mode Exit fullscreen mode

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!

Resources:

Discussion (4)

Collapse
varnitabraham profile image
Varghese Abraham

Great post! Really helpful..

Collapse
ferueda profile image
Felipe Rueda

The table one is neat! Thanks

Collapse
naresh profile image
Naresh Poonia • Edited

Bookmarked this post, Will use for future reference.
Thank you for posting this

Collapse
progressiveprogrammer profile image
Aman Jaswal

This is really helpful, never imagined it could be done this clean way... Thanks for sharing!!