5

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.

Error Image

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.

Rich
  • 3,505
  • 1
  • 30
  • 60
  • 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

0 Answers0