How to become a debugging boss

Carolina Cobo
6 min readNov 29, 2022

I attended my first conference, and as I gather the information from the different talks I went, so I don’t forget but mostly so you can learn it as well, I wanted to start with this one. This talk was by codeSTACKr, go check all his content out!

I’ve always thought the only option was Console.log() and even though it was very hard for me to know where to use it to make the most out of it. So now that I think I’m getting the hang of it turns out there are several more options to learn but to be honest it will make my life way easier.

Using { } in Console.log()

I want to start with this one because I think it’s very useful and I use it all the time when I have a million console.logs all over the place.

I’m sure you’ve done something like this before to assign a label👇

let name = "Ash"
let surname = "Ketchum"
console.log("name:", name,"surname:", surname)

But you can also do this:

console.log({name, surname})

Easy right? A good way to use it is when you have an object and want to have it labelled:

let champion = {
name: "Ash",
surname: "Ketchum",
championOf: "Alola League",
numberOfPokemon: "83"
}

console.log(champion)
console.log({champion})

As you can see using the curly brackets will give you a label with the name of your object so it’s easier to identify!

console.clear()

This one will clean up your console, very useful if you want to clear it after you’ve finished up with all the console logging to make sure your console is pristine.

I’m sure you’ve seen some of the following popping up on your console when inspecting a page but you can make the most out of them to help you debug.

console.info()

Basically the same thing as console.log, but depending on your browser, you will get a little i icon.

console.warn()

--

--

Carolina Cobo

Frontend Software Engineer @ Genesys | Career switcher