DEV Community

Debugging JavaScript Like a Pro: Tools and Techniques for Finding and Fixing Bugs

Ayesha Sahar on February 25, 2023

Introduction JavaScript is a powerful programming language used to create interactive web pages and dynamic user interfaces. However, li...

Read full post

Anthony Fung • Feb 28 '23

A very comprehensive list!

I'd add that sometimes conditional debugging can make things run slower, but that only starts to matter when running loops with a large number of iterations.

If that becomes a problem, sometimes it's worth just adding the condition into the code temporarily and putting an unconditional breakpoint into the code. For example, if looping through 1000 items for something called foobar, you could do

items.forEach(itm => {
  if (itm.name === 'foobar') {
    const x = 0; // actual logic doesn't matter: this is here just so a breakpoint can be added
  }

  // remaining logic
});

Ayesha Sahar • Mar 1 '23

Thank you so much for sharing about this😊🙌

Luke Cartwright • Feb 25 '23

Which code editor do you recommend that is best for debugging?

Ayesha Sahar • Feb 26 '23

As far as I know, I don't think there is a code editor just made for "debugging". Just use whatever code editor you normally feel the most comfortable with and use various tools or techniques to debug your code.

Personally speaking, I just use VS Code and it works really well for me.

Pushp Singh • Mar 2 '23

I would suggest to use browser developer console for debugging.
It will not only help you in debugging but will also help you to understand how javascript code works in javascript engine step by step.

Tip:
Just use debugger/breakpoint in your code, which will help you to see your code working step by step.

Felipe Rodrigues • Feb 25 '23

Webstorm.

Luke Cartwright • Feb 25 '23

What do you think of VS code?

fruntend • Feb 27 '23

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Ayesha Sahar • Feb 27 '23

Thanks for featuring my article :)

Steve P. • Mar 3 '23

I would bet that 50-75% of development time is reduced by fully coding in Typescript and never writing another ".js" file again unless you have legacy code and will do quick fix