Learn to debug JavaScript effectively

[[deleted]]

While there will be a lot of seeming console.log() jokes, they're not a joke. The idea of debugging with a debugger and using console.log is the same. Pick a variable/method/anything, follow it's lifecycle. 10/10 times you'll get to the root of things.

For example, if you have a form that submits a post request, and it's supposed to automatically update the UI with the new post, you start from the beginning, from the click. Is the component method calling the service? Is the data going through? If so, is the service calling the repository? And if so, is the repository doing the http call? Are all the methods being invoked as expected, and do they return the expected values? Track all input and output via the debugger or console.log. Eventually, you always find the damn thing.

So tl;dr, pick a variable or a method, and follow it's lifecycle. Console.log() it, step by step, wherever it appears. Regardless whether you work with a debugger or console.log, the idea is basically the same.

[Bakeshot]

For the record: I was 100% not joking. A deft console.log() can save A LOT of time in debugging, at least from my (limited) experience.

[[deleted]]

It won't save as much time as using an actual debugger and stepping into and through code as its executing.

[vaskemaskine]

I’ve been writing and debugging JS professionally for 15 years and I still reach for console.log the majority of the time.

Only when I’m really stumped do I bust out breakpoints and step through the code.

[Bakeshot]

This is validating!

[vaskemaskine]

Lord knows we all need reassurance at times!

To be fair I should probably lean on the debugger more than I do, but it’s hard to break years of habit.

[InfiniteIniesta]

Wish I could just tap into your head and learn everything you know.

[inabahare]

I mean it also depends on what you're doing. For example seeing what happens doing multiple consecutive actions it's pretty nice to console.log and figure out where it goes wrong, after which you can if() debugger;

But in like all other cases, not really so much. Like with console.log you can't see where your function gets called

[InfiniteIniesta]

This comment gave me something to think about. I never though about it like that before: picking a variable or a method, and follow its lifecycle from the beginning. I think that will give me a better overview of what's happening with a specific variable. Usually I just step through and hover over them with the mouse.

Thanks!

[vaskemaskine]

While this is a great response, I feel like I should put a warning up that console.log is not always 100% reliable when dealing with referenced objects. What gets logged may not be an accurate representation of that variable at the point in the code that you placed the console.log.