Making Debugging Easy With Console Wrangling by@razchiriac

Making Debugging Easy With Console Wrangling

Have you ever used the console to log the console? No? You should try it. The console will show you what the console can do. Today we’ll talk about two of the functions available on the console object:`console.table()` and `console.trace()` Let’s say we have two objects: carA = {make: 'Ford', model: 'F150', year: '2018', color: 'white'}const carB = 'F250'const CarA = 'Ford'const.
image
Raz HackerNoon profile picture

Raz

JS, React, PWAs and WebAssembly. Tea, reading, nature and meditation.

twitter social icon


Have you ever console logged the console


image

So, you know the good ol’ console.log()

Well, that’s not the only thing the console can do, it’s only the most basic.


Have you ever used the console to log the console? No? You should try it.


The console will show you what the console can do.


image


Today we’ll talk about two of the functions available on the console object:

console.table() and console.trace()


Let’s say we have two objects:


const carA = {make: 'Ford', model: 'F150', year: '2018', color: 'white'}
const carB = {make: 'Ford', model: 'F250', year: '2016', color: 'blue'}


If we wanted to do some debugging and had to print these objects out to the console we could use console.log() but it won’t look too nice.


Look how neat console.table() can display the two objects:


image

You can even sort the two rows by column just by clicking on the headers!


One other console function we’ll talk about today is console.trace(). This will output a stack trace to the console.


image

And that’s all for today.


I hope I’ve helped make your debugging a little less boring. Now go show off your new console skills in your next stand-up.


Cheers!

react to story with heart
react to story with light
react to story with boat
react to story with money

Related Stories

L O A D I N G
. . . comments & more!