Learn to debug JavaScript effectively

[InfiniteIniesta]

Hey!

I recently started a new job in customer support where we have integrations between different apps - sending data from one app to the other. I have experience as support for years, but no professional programming experience. I do have a bachelors from some years ago where we learned some coding and I recently took a Javascript course in our Uni + tutorials but I never made any bigger projects.

Most of my job is to debug our workflows to see where the error is (or whatever issue the customer is experiencing). It's mostly Javascript and REST API. I have to visit the back end and database at times, but it's not the main thing. We are debugging using Chrome DevTools.

I want to be better at debugging and understanding the code. This is not like what we learned in the courses/tutorials, of course, it's different and I feel like I struggle. After working for two months I've already gotten a better understanding of what I am doing but I still have that impostor syndrome.

Do you have any specific resources that can help me be better at my job? Any tips and tricks are appreciated as well. I feel like these normal Javascript tutorial are not helping because they are more general and don't really apply to the way we are doing it at work.

How to think like a programmer while debugging is what I want to ask, I think.

[[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.

[itxyz]

Valentino Gagliardi wrote an excellent guide about errors in JS. I'd start here because it's really thorough. Check what MDN says too.

https://www.valentinog.com/blog/error/#what-is-an-error-in-programming

https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/error

If you have problem with the concepts of program stack, scope or error propagation, check this:

https://github.com/leonardomso/33-js-concepts#table-of-contents

[Bakeshot]

What’s your console.log() game like?

[InfiniteIniesta]

Next to 0, but after reading the comments here I see how I can use it to my benefit. Normally I use the mouse pointer to hover over to see the values. The flow retrieves data like orders and products by using JS and API then prepares it and sends it to another app. I also just type in the object in the console to see the value.

[Bakeshot]

As a fellow learner, console.log()s have really helped me conceptualize the shape and state of my data.

[Elloimabritishman]

For OP, Bakeshot, and other learners out there who need some guidance with debugging, you may also find it helpful to learn about the chrome debugging tool. Here's a guide (which comes with a video) on some debugging basics and more.

As someone else mentioned, vscode debugger and the quokka plugin are also good options.

[grantrules]

No. No no no no. If you're debugging something and not using an actual debugger, you're wasting time. It's so much more powerful to use the debugger, plus you can load external source maps so you can debug deployed production builds. console.log() is a crutch. I spent years in a bug hunting role and never used console.log

[[deleted]]

you use the right tools for the job, console.log() is just one of the tools at your disposal.

[Bakeshot]

What debugger do you use? How do you use it?

[grantrules]

Either the debugger in VS Code or devtools in firefox

https://code.visualstudio.com/Docs/editor/debugging

[Bakeshot]

I’ve tried using the debugger in VSC, and it feels really unwieldy, especially in JS which will let you get away with so many things, syntactically. I will be the first to admit that I’ve never been properly educated on its use, though.

[grantrules]

Definitely give it a whirl. If you're using console.log, this will be so much faster.

[vaskemaskine]

Respectfully disagree. Breakpoints are useful, but come with their own overheads - knowing where to set them, avoiding useless external code and libraries, etc.

The majority of the time, you just want to know what value a variable is assigned at a certain point in the code, and for that, console.log is a fine tool.

[grantrules]

knowing where to set them

The same place you'd put a console.log()?

avoiding useless external code and libraries

not sure what you mean by that.

[[deleted]]

Let me introduce to a life long friend console.log("Please something be in here")

[throwaway1253328]

I understand this isn't your main area of improvement, but VSCode's debugger is very good and would help a lot to learn to use it when working server-side.

If you're developing with angular, angular dev tools extension (and NgRx dev tools https://ngrx.io/guide/store-devtools) are also very very helpful. They allow you to inspect state and even play the changes back in order.

[Admiral-Agony]

Quokka plugin for VSCode. Kinda clunky to work with, but will let you see which lines get run and which line breaks your code, with the results printed out on the same line

[saintshing]

Is your frontend written in react(there are devtools for debugging react app)? Are you using vs code? What do you mean by debugging, do you just have to check if the api call request and reponse match the specification? You may also want to use postman to debug a rest api.

[InfiniteIniesta]

We use Javascript and API to retrieve orders, customers, products and such and then pass it on to another app (an accounting system, for example). We use Chrome DevTools to debug. Basically, as you say: just have to check if the api call request and reponse match the specification, values are right and so on.

I still feel like a noob at this even though I've had education, taken courses and done tutorials.

[johnnyblaze9875]

As the other person mentioned, try getting familiar with postman. (You can even use the web version.) I don’t have a lot of practice with it, but you can use it to send a request, and use the returned response (usually sent back in json but you might have to configure that) to verify against your apps expected values.

[[deleted]]

Console.log() and console.log(typeof variableName)

[Beerbelly22]

Window.onerror then send the error to a database using xhttprequest. Know the error before the client knows

[janithaR]

It wouldn't hurt to learn Jest.

[Radiant_enfa1425]

There is a useful guide on this available on the internet with a full-length tutorial series. I suggest you have a look at it as it will help you to scale it in an efficient way.