debugging next.js with vscode debugger

Question

I have installed a project using create-next-app. I need to debug the server side rendering using my editor: vscode. So i have visited vscode-recipes - how to debug next.js app.

I have made a slight change to the recipe so I won't have to install Next globally.

that's my launch.json config file:

    {
      "type": "node",
      "request": "launch",
      "name": "Next: Node",
      "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
      "runtimeArgs": ["-inspect"],
      "port": 9229,
      "console": "integratedTerminal"
    }

While i'm running it I get the following error:

Error: Use env variable NODE_OPTIONS instead: NODE_OPTIONS="--inspect" next dev

I'm trying to change runtimeArgs to following command that should work: "runtimeArgs": ["NODE_OPTIONS=--inspect"] and I am getting other error:

No such directory exists as the project root: /Users/username/with-redux-thunk-app/NODE_OPTIONS=--inspect

How I can I correctly express "NODE_OPTIONS=--inspect" so it works with vscode debugger?

Answer 1

I managed to debug it without any additional arguments, my config:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/node_modules/next/dist/bin/next"
    }
  ]
}

Answer 2

Potential pitfalls: If your next project is in subfolder in your vscode workspace, you should set sourceMapPathOverrides.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Example",
      "runtimeExecutable": "node",
      "runtimeArgs": ["--inspect", "node_modules/.bin/next", "dev"],
      "port": 9229,
      "cwd": "${workspaceFolder}/subfolder",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/subfolder/*",
      }
    }
  ]
}

source

You may also need a different type of source map, alter your next.config.js.

module.exports = {
  webpack(config) {
    config.devtool = 'cheap-module-eval-source-map';
    return config;
  }
};

Also, Starting in version 9.3.1, do not add the --inspect flag in any configuration - it is passed automatically through the next command.

source with lots of info on topic.