“Unverified breakpoint” in Visual Studio Code with Chrome Debugger extension

Question

I am trying to debug my Typescript code in Visual Studio Code, using the Chrome Debugger extension, but I am getting the \"Unverified breakpoint\" message on my breakpoint,

Answer 1

If everything looks set up correctly but break point still not being hit, the change I needed to make was to specify the exact filename that would be served. 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:

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 goto settings within VSCode and enable: Allow Breakpoints Everywhere