Debugging React/node/express application with VS Code

Question

I'm trying to debug my express application I have configured my IDE based on the vs code ( version 1.13 ) help documentation (s). But when I run the application, the process never stops at the break points.

We are working on a react (redux)/node/express application which uses webpack/babel.

The usual start script starts our application in 3000/8443(secured). Please find my launch configuration file (launch.json):

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch via NPM",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "start",
                "debug"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "console": "integratedTerminal",
            "sourceMaps": true,
            "outFiles": ["${workspaceRoot}/dist/*/.js"],
            "port": 5858
        }
    ]
}

While starting up, we are getting the following error:

Cannot connect to runtime process, timeout after 10000 ms - (reason: 
Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:5858).

Did I missed anything here? I'm using osx (10+) for development

Thanks, Santhosh

Answer 1

I suggest setting a dev script in your package.json as follows (I included the start script for you to figure out what to write in your 'dev' script:

"scripts": {
    "start": "cd dist && node main",
    "dev": "cd dist && node --inspect=5858 main"
},

And then configure your launch.json to use that script (which launches npm listening to the debugger):

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch via NPM",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run",
        "dev"
      ],
      "port": 5858,
      "sourceMaps": true,
      "outFiles": [
        "${workspaceRoot}/dist/"
      ],
      "cwd": "${workspaceFolder}"
    },
  ]
}

Also, don't forget to add devtool: 'sourcemap' to your webpack config, so that the breakpoints get triggered in the source code.