Try this configuration in your launch file:
{
"name": "Attach to Process",
"type": "node",
"protocol": "inspector",
"request": "attach",
"stopOnEntry": false,
"port": 5858,
"localRoot": "${workspaceRoot}",
"remoteRoot": "/somepath/myprojectroot",
"sourceMaps": true
}
Make sure the remoteRoot is correct path, otherwise it won't know where to look for the source files.
Try this configuration in your launch file:
{
"name": "Attach to Process",
"type": "node",
"protocol": "inspector",
"request": "attach",
"stopOnEntry": false,
"port": 5858,
"localRoot": "${workspaceRoot}",
"remoteRoot": "/somepath/myprojectroot",
"sourceMaps": true
}
Make sure the remoteRoot is correct path, otherwise it won't know where to look for the source files.
On the VSCode settings search for 'debug javascript use preview', and then disable it. It should now bound all breakpoints.
For anyone who runs into this error, I was able to find a solution. The issue was the way I was launching the Node process, not the mapping of the source maps (which produces a different error).
To attach to the process, I launched it from the VS Code terminal like this:
node --inspect dist/server.js
launch.json:
{
"type": "node",
"request": "attach",
"name": "Attach by Process ID",
"processId": "${command:PickProcess}",
"protocol": "inspector",
"address": "localhost",
"port": 8080,
"restart": true,
"preLaunchTask": "npm: build",
"sourceMaps": true,
"outFiles" : [ "${workspaceRoot}/dist/**/*.js" ]
},
I was finding all the breakpoints I tried to set in one file got this problem, but non of the rest.
I was naming the file dispatcher.js with a lower case, but pulling it into node with:
const { Dispatcher } = require('./Dispatcher')
and the contents was a javascript class being exported as:
module.exports = { Dispatcher }
In my case to debug Vue app, I specified the following values in launch.json file.
"webRoot": "${workspaceFolder}/<vue-app-folder>/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*"
}
You need replace the <vue-app-folder> with your folder name.
Run Ionic serve and check what url it opens e.g. http://localhost:8100/smsalerts
then change url in configurations to be the same, as below
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8100/smsalerts",
"webRoot": "${workspaceFolder}"
For me was problem in another. When you are added launch.json, you can see webRoot variable that has a value ${workspaceFolder} by default. Lets check what does it mean in this source
${workspaceFolder} - the path of the folder opened in VS Code
and in my case angular project was inside folder of another project and when i tried to debug i get breakpoint is set but not yet bound message.

And if you will open your angular project in VSCode explorer as root folder, your breakpoints will work.

Or if you don't want to open separate folder in VS Code explorer, you can specify in launch.json path to angular folder, like: ${workspaceFolder}/folder/folder/...
After this changes your debug should work.
I solved the problem by updating some software:
- VS Code: 1.37.1
- Chrome: 69.0.3497.128
- Node.js: 10.11.0
- V8: 6.9.427.31
