Two Simple Tips For Debugging In the Console

#beginners #javascript #webdev

For my first post, I thought I would share 2 simple tips that I use when debugging Javascript in the console. You might very well know these already!

Reigning in the console

Not necessarily saying it's ideal, but if you're in the midst of an epic debugging sesh, you might end up in a situation with loads of console.log sprinkled all over your beautiful code like this:

console.log(isLoggedIn);
// sometime later:
console.log(user);
// in another file:
console.log(likes);
// more logs all over the place...
console.log(followers);

The flurry of logs in the console can quickly become a burden of confusion. What data belongs to what value, assuming we don't know what order they're even ran amidst the flow of our code?

One solution is that we can console.log('data: ', data), but we can also accomplish the same in fewer characters. What we can do instead is wrap our value in an object as such: console.log({ data }) and the console will print out the name of the variable before the data:

We're basically using ES6 shorthand syntax to log out an object that we create on the fly.

Refactoring Functions

Talk about ES6, another situation is that you might be writing your functions using more shorthand syntax like this:
const exclaim = txt => text + "!"
but then, some time later, you want to log txt, so you have to refactor the code to something like this:


const exclaim = txt => txt + "!"

// needs to become:

const exclaim = txt => {
  console.log(txt)
  return text + "!"
}

Almost makes you want to skip the whole task. Well, you can also do the following and still log the parameter:


const exclaim = txt => console.log(txt) || txt + "!";

What happens here is that the console.log runs as normal and evaluates to false, so the parser evaluates the second expression of the OR clause txt + "!" and returns it as they are no more expressions to check. We sneaked in that log along the way and threw it away essentially. As such we can keep our functions as one-liners and still inspect them without jumping around in the editor.