VS Code Unverified Breakpoints

Question

I\'m trying to debug a Node/Express TypeScript app in VS Code (v. 1.24.0) and all my breakpoints are greyed out during debugging.

The error is \"Unverified Breakpoint, B

Answer 1

I was running into an identical issue; if an error was present, the debugger would report on the error, but if no error it would not stop on breakpoints. The change that resolved for me was to specify the exact filename that would be served rather than just localhost. For example on NodeJS, Express just specifying localhost:3000 would not stop on my breakpoints, but specifying localhost:3000/index.html worked as expected

Full config which stops on breakpoints as expected (to date):

My folder open in VSCode: learningPixi with full folder location (Ubuntu Linux): /home/leigh/node/pixi-tut/learningPixi

My folder structure is:

/home/leigh/node/pixi-tut/learningPixi/.vscode/launch.json /home/leigh/node/pixi-tut/learningPixi/public/index.html /home/leigh/node/pixi-tut/learningPixi/server.js

Contents of my launch.json file:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000/index.html",
      "webRoot": "${workspaceFolder}/public",
      "skipFiles": ["pixi.min.js"]
    }
  ]
}

"skipFiles" was also very useful otherwise debugger steps into every function call

My (very basic) express server config just for debugging JavaScript in static files was:

const express = require('express');
const path = require('path');

const app = express();
app.use(express.static(path.join(__dirname, '/public')));
app.listen(3000, () => console.log('App started on port 3000'));

And as per folder structure above ensure index.html is located in /public folder

If debugging JavaScript from within an HTML file, you may also need to go to settings within VSCode and enable: Allow Breakpoints Everywhere