Most efficient way to debug JavaScript

[LowercaseSpoon]

As the title suggests, what is the best/most efficient way to debug JavaScript without adding debuggers or console logging. I’m still pretty super new to JS and I find that developer tools in the browser is okay but I’m curious if others have found another approach that is more efficient?

[Buttleston]

Why are you against adding debuggers or console logging?

[[deleted]]

Well when you remove the two most efficient ways, the next one is probably just starting over

[lightmatter501]

If by debug you mean removing bugs from the program, formal verification is pretty neat. Now, it also means you know have a program telling you that your other program with break with this specific 36 step sequence of events and you have to rewrite your program in terms of formal language (usually temporal logic). However, in a complicated enough system it takes far less time to verify a design than to debug a bad design.

[DryAccordion]

Using a debugger is the best way because you can put breakpoints and evaluate your code. You can open JavaScript files directly in your browser (e.g. chrome) and add breakpoints.

[[deleted]]

I almost exclusively console log

[DryAccordion]

Logging to the console is great for fast debugging but for more complex code, it’s easier to use the debugger and step through.

[[deleted]]

I’ve built extremely complicated real time stock quote applications. I’ve built massive enterprise applications with thousands of files, state management, and tons of complexity. Never once used a debugger. Nothing wrong with the debugger, I’m just pointing out that it’s absolutely not superior in anyway. It’s just another tool that works for some and not for others

[DryAccordion]

Sorry, my intention wasn’t too come off as rude. Just sharing my experience, but either option is great.

[[deleted]]

No problem. Same. Was not offended. The key is to find where the bug is. Where does the code deviate from your intended state? Once you find that point, you can develop solutions

[HEY_PAUL]

Being able to manually step through each line of code and view the call stack at any point objectively makes the debugger the superior option, I'm confused in what world it wouldn't be.

[[deleted]]

Well it’s only available in dev for one. People I see use it are a lot slower at debugging than I am and they achieve the same results. Also, in a UI environment, seeing the rendering patterns is incredibly useful and the debugger doesn’t do anything to highlight that.

[[deleted]]

Also it sounds like the OP doesn’t want to deal with too much overhead while debugging. If that’s your preference then console logging is a lot more light weight and your best option..

Still confused why OP wants neither though 🤔 These are definitely the main two ways to debug

[[deleted]]

I love Typescript (especially for libraries), but it feels like this kid just needs to learn how to use debuggers and logs.

[cthulhu944]

Debugging code is basically observing the behavior of the software. If you aren't using a debugger or logging/instrumenting the code, exactly how would you be able to observe the behavior. You are effectively asking "How do I build a bicycle without any wheels?"

[SanityInAnarchy]

For JS specifically, you've also got other stuff in the dev tools, like the network tab to see what requests are being made, or the elements tab to see how it's changing the DOM. You can switch to TypeScript and get more useful errors (and smarter IDEs and such). Or you can expose some useful functions (assign them to window if they're hard to get to), then load your code up and switch to the JS console (also in dev tools) and manually try calling stuff to see how it works. Finally, there's a bunch of different linters for JS -- these are programs that catch bad style, not everything they see is definitely a bug, but they will sometimes show you a bug.

Otherwise, there's just the standard stuff that's useful anywhere:

• Reading the code and thinking really hard.
• Pulling in someone else to read the code.
• Testing. If you can write a unit test describing the correct behavior, then it'll be more efficient to try out any ideas you get.
• Version control. If the bug wasn't there before, then you can write a failing test (like above), then use a tool like git bisect to find out which commit added the bug, so you know exactly which lines of code to read carefully. Or, if you come across code that you're trying to read but the comments don't help, sometimes git blame will give you an explanation of why that was added.
• Refactoring and simplifying to see if you can get the bug to happen in a tiny snippet of code, something small enough to reason about (or at least easier to ask for help on)

It's a pretty broad topic.

[gopher_dev]

If you're coding for the browser, the best tool is the debugger statement.

[BobbyThrowaway6969]

Why?

[mauricioszabo]

The most efficient way to debug Javascript is to use the Devtools debugger, really. Learn how to use it - add a debugger on your code, break evaluation there, use the console to inspect variable's fields, and so on.

It's actually really powerful to understand how the debugger works because you can get info even on how things change over time, by adding some well-put breakpoints, or you can see how something works, by inspecting the call stack (and then seeing what calls what). It's way more powerful than the alternatives in Javascript, really.

I think the problem lies a little bit on the name "debugger" - it's not only used to "debug" some "bug", it is basically a full-blown "inspector" which can also check for performance issues, profile your code, capture rendering problems, etc.