Stop Using console.log() for Debugging — Do This Instead

If you're still debugging JavaScript apps with console.log(), you're not alone. But you're also probably wasting hours every week without realizing it.

In this article, I’ll show you why this common habit is quietly killing your productivity—and walk you through how to set up and use the VSCode Debugger to speed up your workflow dramatically.

The Hidden Cost of console.log()

Here’s what most devs do:

1. Insert multiple console.log() statements throughout the code
2. Save → Refresh → Read → Repeat
3. Hope one of the logs reveals the issue

It feels efficient because you're doing something. But it’s actually slow, error-prone, and messy—especially in large apps or when debugging async behavior.

Every extra minute spent guessing values is time you could be solving the problem directly.

What’s Better? → The VSCode Debugger

VSCode has a built-in debugger that lets you pause your code mid-execution and see everything happening behind the scenes.

Here’s what you can do with it:

✅ Set breakpoints anywhere ✅ Watch variable values in real time ✅ Step through your code line by line ✅ See the call stack and scope ✅ Modify variables on the fly during a paused state

Sounds better, right?

Let’s walk through a real-world example 👇

🛠️ Example: Debugging a Node.js App with VSCode

Suppose you have this Node.js function:

function getUserInfo(userId) {
  const user = database.find(u => u.id === userId);
  const profile = getProfileDetails(user.profileId);
  return profile;
}
        

Let’s say profile is coming back as undefined.

Instead of writing 3 different console.log()s like this:

console.log("User ID", userId);
console.log("User object", user);
console.log("Profile", profile);
        

You can do this:

1. Open VSCode
2. Go to the left panel → Click on the Run and Debug icon
3. Click "create a launch.json" file
4. Select Node.js
5. Set a breakpoint at return profile;
6. Run the debugger

Now you can:

• Hover over user, user.profileId, and profile to inspect values
• See if user is null, or if profileId is missing
• Use the Debug Console to test values or edit on the fly

No need to reload or rerun manually.

You just saved yourself 10+ minutes of “trial and error.”

Set It Up in 1 Minute

In your .vscode folder, create a file called launch.json and add:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug App",
      "program": "${workspaceFolder}/index.js"
    }
  ]
}
        

Now hit F5 to run the debugger with breakpoints.

Final Thoughts

The VSCode Debugger isn’t just “for big apps” or “senior devs.”

It’s for every dev who wants to debug smarter, faster, and cleaner.

You’ll write fewer logs. You’ll find bugs faster. You’ll actually enjoy debugging again.

Start using it today → your future self will thank you.

✅ Found this useful? Hit the follow for more dev productivity tips. ♻️ Repost this with your team. It might save them hours this week.