Pfthb

I'm having trying to debug my app on Visual Studio Code. I have the following config on my package.json:

"scripts": 
 "build": "rimraf dist/ && babel ./ --out-dir dist/ --ignore ./node_modules,./.babelrc,./package.json,./npm-debug.log --copy-files",
 "start": "npm run build && node --inspect=12345 dist/app.js"

Im using ES6 on my Node app, that's why it is kinda messy my build config.

When I run npm start everything works fine, I can use my app.

Now to try to debug it, I have set the following launch configurations:

"configurations": [
 
 "type": "node",
 "name": "Attach to Remote",
 "request": "attach",
 "port": 12345
 ,
 
 "type": "node",
 "request": "launch",
 "name": "Launch Program",
 "program": "$workspaceFolder\dist\app.js"
 
]

Both of them ""work"": VS Code switch to "debug mode" but I can't hit any breakpoints. They all get grayed out:

I have tried to fix using this answer, but couldn't get it to work...

Any help?

Thanks in advance!

I am using VS Code v 1.28.2 and I'm able to debug both ways.

1) With the built in debuger ( Menu -> Debug -> Start Debuging)

2) starting the application with node inspect index.js. In that case you have to declare breakpoints in your code with the debugger; keyword. Then, when in debug-mode and stoped in a breakpoint, you continue execution typing cont in the command line.

hope it helps

I found out I was just missing the --source-maps from my babel-cli command... -.-
After adding it, VSCode is able to find the breakpoints.
So basically the solution was:

Add --source-maps to my build command:

"scripts": 
 "build": "rimraf dist/ && babel ./ --out-dir dist/ --ignore ./node_modules,./.babelrc,./package.json,./npm-debug.log --copy-files --source-maps",
 "start": "npm run build && node --inspect=12345 dist/app.js"
 

And I configured a launch as follows:

"configurations": [
 
 "type": "node",
 "request": "launch",
 "name": "Launch Program",
 "program": "$workspaceFolder\dist\app.js",
 "preLaunchTask": "npm: build"
 
]

Hope it helps someone!