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.

I am using the instructions from the official site of nextjs at the following link for debugging https://nextjs.org/docs/advanced-features/debugging . (they have for vscode as well) — gijoe, Oct 21 '20 at 06:45
@gijoe I am getting this error `'NODE_OPTIONS' is not recognized as an internal or external command, operable program or batch file.` I tried to search Google, and it says to use `cross-env`. But I think this is a work around since according to the official documentation, I just need to add that line. How were you able to fix this? — Rich, Oct 21 '20 at 09:07
can you send a print of your package.json? is the scripts key like that? "scripts": { "dev":"NODE_OPTIONS='--inspect' next dev", "build": "next build", "start": "next start" }. and then you just run "npm run dev" and node runs with a debugger and prints this extra line "Debugger listening on ws://127.0.0.1:9229/5cdbedb7-6a47-4f7d-8b9b-363476d35a26" — gijoe, Oct 21 '20 at 09:31
@gijoe `"scripts": { "dev": "NODE_OPTIONS='--inspect' next dev", "build": "next build", "start": "next start" }` — Rich, Oct 21 '20 at 10:12
they have a similar issue with you on stackoverflow (solution here https://stackoverflow.com/questions/53948521/node-options-is-not-recognized-as-an-internal-or-external-command) => install cross-env "npm install cross-env" and update scripts "dev" by appending in front "cross-env NODE-OPTIONS='--inspect' next dev" . I cannot confirm from my side, because its working in my local machine — gijoe, Oct 21 '20 at 12:55

score 0 · Answer 1 · answered Sep 20 '22 at 07:47

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 Answers1