DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Annie Liao
Annie Liao

Posted on

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

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:

Top comments (4)

Collapse
varnitabraham profile image
Varghese Abraham

Great post! Really helpful..

Collapse
naresh profile image
Naresh Poonia • Edited on

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

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.