DEV Community

Nico Reyes
Nico Reyes

Posted on

My VS Code debugger broke. Took 3 days to find the dumbest fix.

My VS Code debugger broke. Took 3 days to find the dumbest fix.

Was debugging a Node script last week. Breakpoints wouldn't hit. Console.log worked fine so I kept using that like an animal for 3 days straight.

Turns out I had the wrong launch config the whole time.

I'm working on a scraper that pulls product data. It kept returning undefined for certain fields. Console.log showed me the response looked fine, but somewhere in the parsing it was breaking.

So I did this:

console.log('response:', response);
console.log('data:', data);
console.log('product:', product);
console.log('price:', price);  // undefined - cool cool cool
Enter fullscreen mode Exit fullscreen mode

Twenty console.log statements later I still couldn't see where it was breaking. The terminal output was a mess. Scrolling through walls of JSON trying to spot the issue.

I knew VS Code had a debugger. I'd used it before on other projects. But this time the breakpoints just... didn't work. They'd show up as gray circles instead of red. Script would run straight through them.

Googled "VS Code breakpoints not working Node.js" and tried everything:

  1. Restart VS Code (did nothing)
  2. Delete node_modules and reinstall (waste of 5 minutes)
  3. Update VS Code (already latest version)
  4. Check if source maps were the issue (I wasn't using TypeScript so no)

Still broken. Back to console.log hell.

Turns out I was running the script with node scraper.js in the terminal. Just typing it manually every time. The VS Code debugger needs you to launch through the debug panel OR have the right launch.json config.

I had a launch.json but it was set up for a different project. It was trying to run npm start which didn't exist in this repo. So when I clicked the debug button, nothing happened. When I set breakpoints and ran node scraper.js manually in terminal, they got ignored because that's not an attached debug session.

Created a proper launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Scraper",
      "program": "${workspaceFolder}/scraper.js",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Clicked the debug button. Breakpoints turned red. Hit F5. Stopped exactly where I wanted.

Took 30 seconds to see the issue. I was calling .text on an element that didn't exist. The selector was wrong. One line fix.

Spent 3 days with console.log. Took 30 seconds with the debugger.

Usually when breakpoints don't work it's because you're not launching through the debugger. Running node file.js in the terminal won't attach to VS Code's debugger session. You need to either click the debug button or set up launch.json to point to the right file. Also make sure the "type" field matches what you're debugging. node for Node.js, chrome for browser stuff, python for Python scripts.

The debugger shows you variable values at each step, call stack, watches. You can step through line by line. Console.log shows you one thing at one point in time. Then you add another console.log. Then another. Then you're scrolling through terminal spam trying to find the one value you care about.

I knew this. Still kept using console.log because it was easier than fixing a config file.

Top comments (0)