Next JS Server Side Default Port for Debugging

Question

I've been trying to debug my server side code in NextJS by marking a breakpoint. I am using VSCode to my development.

Initially, my launch.json was like this.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

This works fine; however, it does not hit any server side code like getStaticProps, getStaticPaths and getServerSideProps.

I found this blog post that I believe can solve my problem. So I added a script to my package.json, and amend my launch.json. So now it looks like this

package.json

{
  "scripts": {
    "debug": "node --inspect-brk ./node_modules/next/dist/bin/next"
  }
}

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Next.js",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run-script",
                "debug"
            ],
            "port": 3000
        }
    ],
    "compounds": [
        {
            "name": "Debug Next.js + Chrome",
            "configurations": [
                "Launch Next.js",
                "Launch Chrome against localhost"
            ]
        }
    ]
}

So when I try to run this, I got an error to my Launch Next.js configuration.

I believe this is because I am pointing to an incorrect port. I tried to search what is the default port for server side part of NextJS. But I cannot find one.

user_9610557 · Answer

I have same problem with setting breakpoint on API, so I took a few hours to figue out what's the real problem. Finally I found the issue:

Because when you run a Nextjs app, Node will first run next script, then next script will spawn a child process which is your own code. Nextjs also automatically set NODE_OPTIONS=--inspect when you use dev mode, but it use different port number and the number changes automatically. The KEY POINT is: The Next script and the child process will have different debugging port number. , That is the reason that you sometimes can't set breakpoints.

There are some senarios:

If you start your server manually in VSCODE terminal by type "npm run dev", VSCODE will automatically find the debugging ports and you will be fine.
If you start your server outside of VSCODE from a terminal, and then use attach, VSCODE will only attach one port, usaully only attached to Nextjs script. That's why you can't set breakpoint in you own code.
If you use launch method to start server in launch.json. Then same problem will happened like No.2, You can't set your breakpoint.

There is a simple way to solve the problem: Either start server from VSCODE internal terminal or in launch.json, add:

  "autoAttachChildProcesses": true,

then you can start debugging by hit F5 and everything going well.

   {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      },
      "autoAttachChildProcesses": true,
    }

Next JS Server Side Default Port for Debugging

1 Answers