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}"
I just use --inspect, and it works fine.
I have not had success specifying the port with --inspect-brk=9229
--inspect uses port 9229 anyway
Your config for the server should be like this:
{
"type": "node",
"request": "attach",
"name": "server",
"restart": true,
"port": 9229
},
The restart option is useful while you are editing code, as it survives server restarts (by re-attaching)
It seems this message shows up if the debugger cannot "reach" the breakpoint's file through the node process the debugger is attached to.
The error message is not well covered in VS Code documentation so it's hard to find out what causes it.
I tested this by adding a file to a project, putting a breakpoint in it but not include/require'ing it anywhere. When you run the debugger (on another file) the breakpoint you just added will be "set but not yet bound".
Conversely, if you include/require the new file, the breakpoint will be normal (even if your tests never reach the line the breakpoint is on).
In my case, I inherited a codebase and found out that if your script spawns child processes (e.g. through child_process.execFile), the debugger will not track the code in the child process. Instead, it will show breakpoints as "breakpoint set but not yet bound".