# Sharing VSCode custom node debugging configuration
**URL:** https://discourse.nodered.org/t/sharing-vscode-custom-node-debugging-configuration/44233
**Category:** Developing Nodes
**Created:** [15 April 2021 14:29 UTC](https://discourse.nodered.org/t/sharing-vscode-custom-node-debugging-configuration/44233 "2021-04-15T14:29:28Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@nileio](https://discourse.nodered.org/u/nileio)
#### Post date: [15 April 2021 14:29 UTC](https://discourse.nodered.org/t/sharing-vscode-custom-node-debugging-configuration/44233/1 "2021-04-15T14:29:29Z")
hi everyone,
I saw couple of topics in the past for information on debugging custom nodes, and thought I'd share my launch configuration for VSCode..
Please make sure you have the latest version of VSCode. This my need some tweaking to your needs but essentially it uses **nodemon** for watching changed files in a directory named `src` where you store the custom nodes.
```auto
{
"version": "0.2.0",
"configurations": [
{
"console": "integratedTerminal",
"internalConsoleOptions": "openOnFirstSessionStart",
"name": "nodemon+chrome",
"request": "launch",
"restart": true,
"runtimeExecutable": "nodemon",
"runtimeArgs": ["--preserve-symlinks", "--experimental-modules", "--config", ".nodemon.json", "--exec", "npm run debug"],
"sourceMaps": true,
"smartStep": true,
"outFiles": ["${workspaceFolder}/src/**/*.js"],
"envFile": "${workspaceFolder}/.env",
"cwd": "${workspaceFolder}",
"skipFiles": ["vendor.js", "red.*.js", "red/*.js", "vendor/*.js", "vendor/*", "red/*", "/**"],
"type": "pwa-node",
"serverReadyAction": {
"action": "startDebugging",
"pattern": "Started flows",
"name": "Launch Chrome"
}
},
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:1880",
"skipFiles": ["vendor.js", "red.*.js", "red/*.js", "vendor/*.js", "vendor/*", "red/*", "/*"],
"smartStep": true,
"cwd": "${workspaceFolder}",
"disableNetworkCache": true,
"internalConsoleOptions": "neverOpen",
"sourceMaps": true,
"outFiles": ["${workspaceFolder}/src/**/*.html"],
"pathMapping": {
"/": "/usr/local/lib/node_modules/node-red/node_modules/@node-red/editor-client/public/",
"/debug/view/": "/usr/local/lib/node_modules/node-red/node_modules/@node-red/nodes/core/core/lib/debug/",
"/src/": "${workspaceFolder}/src/"
},
"resolveSourceMapLocations": ["${workspaceFolder}/ **", "!** /node_modules/**"]
}
]
}
```
What the configuration does is
1. launch node-red in debug mode using **nodemon** which internally calls the `npm debug` script defined in `package.json`
2. once node-red loads, it automatically launch Chrome in debug mode.
The key to successfully debug and step through code for the client-side editor is sourceMaps [[SourceMap - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap)]
So for this to work with Node-RED, you need sourceMaps created for the html file. the JS file can usually be automatically detected and you don't require to create a source map for it.
I created a script that generates source maps for node-red custom nodes which can be found [here](https://github.com/nileio/node-red-contrib-ccxt-v2/tree/master/gensourcemaps)
download the folder containing the script and install using `npm install`
now you can use the script `gensourcemaps.js`.
I integrate the installed script with npm in my `package.json` for custom nodes using **nodemon** too this way
```auto
"scripts": {
"maps": "genmaps --sourceRoot /src/ -o html,js",
"debug": "genmaps --sourceRoot /src/ -o html && node --nolazy --inspect /usr/local/lib/node_modules/node-red/red.js"
}
```
`genmaps` is just a symbolic link to `gensourcemaps.js`
Once you have this done, you should be able to debug and create breakpoints in both your client-side and server-side code.
hope this make sense and helps someone
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [14 June 2021 14:30 UTC](https://discourse.nodered.org/t/sharing-vscode-custom-node-debugging-configuration/44233/2 "2021-06-14T14:30:06Z")
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.