Sharing VSCode custom node debugging configuration

Developing Nodes
1

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.

{
  "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/*", "<node_internals>/**"],
      "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/*", "<node_internals>/*"],
      "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]
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

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

"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

2 Likes
2

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.