Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 28, 2020 08:04 pm GMT

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: 'Hammarstrm', 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'    'Hammarstrm'  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  BeefVeggies  Corn  Spinach  CarrotsFruits  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!

Resources:


Original Link: https://dev.to/liaowow/beyond-console-log-3-ways-to-format-console-outputs-in-javascript-236p

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To