VSCode Gatsy Debug Error with SourceMaps - visual-studio-code

Question

I was trying to set up VSCode to be able to debug Gatsby code.
I am new to Javascript sourcemaps which seem to be the cause of the problem.
I am seeing the following error on launch:
Cannot launch program "c:\Gatsby\myprogram\node_modules\.bin\gatsby" because corresponding Javascript cannot be found.
I verified that the path to the file gatsby in the error exists.
This is the file that I am using for launch.json:
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"protocol": "inspector",
"program": "${workspaceRoot}/node_modules/.bin/gatsby",
"args": ["develop", "-p", "7777"],
"stopOnEntry": false,
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development",
"DEBUG": "gatsby:*"
},
"console": "integratedTerminal",
"sourceMaps": true,
"outFiles": []
}
]
}

Answer 1

I was able to get this working by using globally installed gatsby-cli's gatsby instead of the one in node_modules. So:
npm install --global gatsby-cli
and then (since I use node/npm etc under nvm):
{
"type": "node",
"request": "launch",
"name": "Launch 'gatsby develop'",
"protocol": "inspector",
"program": "${env:HOME}/.nvm/versions/node/v8.11.3/bin/gatsby",
"args": [
"develop"
],
"stopOnEntry": false,
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development",
"DEBUG": "gatsby:*"
},
"console": "integratedTerminal",
"sourceMaps": true,
"outFiles": []
}
worked for me.
I'm on OSX though, more changes may be needed for your Windows setup.
Also: to use node under nvm with VSCode, I used the default alias method from here: Visual Studio Code to use node version specified by NVM

Answer 2

Quoted from the documentation
VS Code Debugger (Auto-Config)
Using VS Code’s integrated terminal run node --nolazy node_modules/.bin/gatsby develop --inspect-brk instead of gatsby develop or node --nolazy --inspect-brk node_modules/.bin/gatsby build instead of gatsby build
VS Code Debugger (Manual Config)
Linux
{
"version": "0.2.0",
"configurations": [
{
"name": "Gatsby develop",
"type": "pwa-node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/.bin/gatsby",
"args": ["develop"],
"env": {
"PARCEL_WORKERS": "0",
"GATSBY_CPU_COUNT": "1",
},
"runtimeArgs": ["--nolazy"],
"console": "integratedTerminal"
},
{
"name": "Gatsby build",
"type": "pwa-node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/.bin/gatsby",
"args": ["build"],
"env": {
"PARCEL_WORKERS": "0",
"GATSBY_CPU_COUNT": "1",
},
"runtimeArgs": ["--nolazy"],
"console": "integratedTerminal"
}
]
}
Windows
{
"version": "0.2.0",
"configurations": [
{
"name": "Gatsby develop",
"type": "pwa-node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/.bin/gatsby",
"windows": {
"program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
},
"args": ["develop"],
"env": {
"PARCEL_WORKERS": "0",
"GATSBY_CPU_COUNT": "1",
},
"runtimeArgs": ["--nolazy"],
"console": "integratedTerminal"
},
{
"name": "Gatsby build",
"type": "pwa-node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/.bin/gatsby",
"windows": {
"program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
},
"args": ["build"],
"env": {
"PARCEL_WORKERS": "0",
"GATSBY_CPU_COUNT": "1",
},
"runtimeArgs": ["--nolazy"],
"console": "integratedTerminal"
}
]
}