Razzle: Debug the node server with vscode

I have good luck with attach by process id. There's also a sourceMaps vscode launch config option you can set to true.

    {
      "type": "node",
      "request": "attach",
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "restart": true
    }

@ajsharp thanks for your reply :smiley_cat:

Same as attach method. I can not set a breakpoint in src/index.js.

The sourceMaps option is true by default (cf. https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_source-maps)

I solved this using a different sourcemap setting, VSCode doesn't seem to like the cheap-module-sourcemap one.
razzle.config.js:

module.exports = {
    modify(config, { target, dev }, webpack) {
        config.devtool = dev ? 'eval-source-map' : 'none';
        return config;
    }
}

launch.json:

{
    "name": "Attach to dev server",
    "type": "node",
    "request": "attach",
    "protocol": "inspector",
    "address": "localhost",
    "port": 9230
}

and start the server with yarn start --inspect --inspect-port 9230

*edited, thanks @dguyonvarch for catching the error.

@benhamlin :smile_cat: It works fine !
I just fixed your snippet with:

module.exports = {
  modify: (config, { target, dev }, webpack) => {
      config.devtool = dev ? 'eval-source-map' : 'none';
      return config
  }
}

I find this in razzle/packages/razzle/config/createConfig.js line 93:

// Controversially, decide on sourcemaps.
devtool: 'cheap-module-source-map'

So I open the controverse :wink: ! Why cheap-module-source-map rather than eval-source-map

Anybody want to add a section to the docs about this recipe?

@jaredpalmer May i propose a Merge request with eval-source-map? No need to update the doc in this case.

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

Update: A better way to get vscode to debug the server is to add this to your launch.json, and leave the devtool configuration to razzle's default.

This will allow VSCode debugging, as well as a better client debugging experience (eval-source-maps breaks React's debug error viewer).

"sourceMapPathOverrides": {
    "webpack:///*": "${workspaceRoot}/*"
 }

Thanks @benhamlin. Do you if there's anyway to easily reconnect to the debugger instance in VSCode after doing a soft restart (rs then ENTER) in Razzle?

ATM if I do a soft restart the VSCode debugger disconnects, so I then have to kill the server and restart it then reconnect the debugger.

@benhamlin It works like a charm with this configuration :wink:

{
      "type": "node",
      "request": "attach",
      "name": "Attach",
      "port": 9230,
      "sourceMapPathOverrides": {
         "webpack:///*": "${workspaceRoot}/*"
      }
}

@ourmaninamsterdam RS restart the server on a new debug port (9230 + 1), so you have to change the attach port in the launch configuration. I didn't investigate any further :disappointed: