“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

Answer 2

The above answer is probably going to solve a lot of problems but it didn't solve mine. Mine was a much simpler and more annoying problem...

The configuration settings in the launch.json file are case sensitive.

My "webRoot" entry was correctly spelled but I had a capital B in one of the words instead of a lower case b.

For example:

"webRoot": "${workspaceFolder}/My.Folder"

will not match a folder in your workspace with the name:

My.folder

I hope this helps someone out there.

Answer 3

In our case this error was because of a windows symlink to have the source code folder available on two local drives. Opened the folder with vscode from the original folder now debugging works good.

Answer 4

For me, the unverified breakpoint was caused because the debugger was running when I tried to set the breakpoint. To solve, I simply turned off the debugger, set the breakpoint as normal, the restarted the debugger.

Answer 5

In my case I had a main.js file in the project root for running as an electron app. If this main.js file was removed the problem was solved.

Answer 6

In my case the problem was that the breakpoint was set on a line where a function was being declared

openDetails(data: Asset) {         <-- The break point was here
    this.datailsOpen = true;
    this.currentAsset = data;
}

Solution: move it to inside the body of the function

openDetails(data: Asset) {         
    this.datailsOpen = true;        <-- Move the break point here
    this.currentAsset = data;
}