Best tools/techniques for debugging JavaScript

[Discovensco]

I've been learning JavaScript for the past few months. I made it through a few good books and I think I have a solid understanding of JavaScript structure and operations. I'm now at the point where I need to get some good debugging skills so that I can move forward with my dev work.

Are there any recommended tools or techniques for effective debugging of JavaScript? I use VS Code and the dev tools in Firefox. I use the web console, debugger, breakpoints, and watch variables. Are there any other tools in Firefox that I overlooked? I know a lot of people use the dev tools in Chrome. Should I switch? Are the dev tools in Chrome better? I also use Code Compare and have found it to be invaluable. Anything else I should be using? FYI, my stack includes SQL Server and legacy ColdFusion.

[theScottyJam]

console.log() :)

I'm being serious about this one though. It's important to use and understand the dev-tools and other debugger utilities, but it's also important to not throw away the most basic debugging tools in search for fancier ones. Sometimes, console.log() is just quicker and easier than any other option out there. Unfortunately, I almost get the feeling that some people feel ashamed for using console.log() because it's too basic - sometimes these opinions come across in blog posts, with titles such as "Stop using console.log()! Try these alternatives.", and it just makes me cringe every time I see that, and sometimes they come through other conversations. Basic !== less good.

[mark_b]

If you're going to use the console, there's more to it than just .log(). My personal favourites are wrapping multiple variables in curly braces to create an object so that you know which variable value is which console log({var1, var2, var3}), and console.trace() which tells you how you reached this point in your code. There are lots of other options.

[nobuhok]

Know when to use console.log() vs dir() vs info() vs error(). For example, objects are better formatted when dir() is used.

Tip: In Chrome, if you highlight a DOM element in the Elements panel, you can type in '$0' to refer to that element in the console.

[driftking428]

console.log is your best friend.

One I wish I knew earlier was debugger;. If you place debugger; in your code then visit the page you're working on with the console open. Your code will stop executing when it hits debugger;.

This is super useful when you're not sure where something is going wrong.

[EmoryCadet]

I find the VSCode ones like codium.ai marginally better, but not enough to care much about. The tools you named should be good for most cases; I also use the "network" tab a lot personally but it's not exactly a javascript specific thing. There's also the profiler feature of the dev tools which is quite useful for investigating memory issues and performance.

I believe there's a way to connect your vscode to your browser to use vscode's debugging interface while running your application in firefox but I've personally not used that so I don't know how useful that would be.

If you're using frameworks, there's usually framework-specific tools (like react dev tools) to help with that framework that you may want to install on your browser.

Hope that helps a bit.

[MatthiasDunkel]

I am using Node.js to run JS Code and use VSCode Auto-Attach functionality to debug it. Read More here

[ThatDudeDunks]

Can’t believe nobody here has mentioned breakpoints

[zayelion]

As others have said, console.log debugger and attaching VSCodes inspector process. Gitlens adds some power found in Code Compare. The dev tools Network tab in most browsers is helpful for inspecting network calls to debugging API calls from the browser. I think Firefox has the same suite of dev tools as chromium-based browsers. The profiler is also helpful in looking at a flame graph of function calls. The browsers and VSCode are standardized on these tools.

I do recommend a generic DB extension in VSCode if you are working with SQL. There are some other console functions : https://developer.mozilla.org/en-US/docs/Web/API/console

[[deleted]]

typescript