Making Debugging Easy With Console Wrangling

Written by razchiriac | Published 2022/08/14
Tech Story Tags: javascript | debugging | web-development | javascript-development | javascript-tutorial | software-development | software-engineering | software-testing

TLDRHave 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.via the TL;DR App

Have you ever console logged the console

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.

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:

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.

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!


Written by razchiriac | JS, React, PWAs and WebAssembly. Tea, reading, nature and meditation.
Published by HackerNoon on 2022/08/14