How to debug | Payload | Page 1

zenith harness Jun 2, 2024, 6:02 PM

#

I m trying to debug both server and client but seem like breakpoints are not being hit for some reason

my current configuration is this one

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Next.js: debug server-side",
            "type": "node-terminal",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "command": "bun run devturbo"
        },
        {
            "name": "Next.js: debug client-side",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000"
        },
        {
            "name": "Next.js: debug full stack",
            "type": "node-terminal",
            "request": "launch",
            "command": "bun run devturbo", // tried with npm as well
            "cwd": "${workspaceFolder}",
            "serverReadyAction": {
                "pattern": "- Local:.+(https?://.+)",
                "uriFormat": "%s",
                "action": "debugWithChrome"
            }
        }
    ]
}

as followed in the next documentation https://nextjs.org/docs/pages/building-your-application/configuring/debugging#debugging-with-vs-code

On package.json I have this

"scripts": {
        "dev": "cross-env NODE_OPTIONS=--inspect next dev",
        "devturbo": "cross-env NODE_OPTIONS=--inspect next dev --turbo",
        "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
        "build": "cross-env NODE_OPTIONS=--no-deprecation next build"
}

current packages versions:

"@payloadcms/next": "3.0.0-beta.36",
"next": "15.0.0-rc.0",
"payload": "3.0.0-beta.36",
"react": "19.0.0-rc-f994737d14-20240522",`

OS: Windows

What am i missing?

Thanks

Configuring: Debugging | Next.js

Learn how to debug your Next.js application with VS Code or Chrome DevTools.

drowsy canopyBOT Jun 2, 2024, 6:02 PM

#

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

zenith harness Jun 2, 2024, 6:39 PM

#

Also here the log of the start

D:\repositories\majestico\maia>bun run devturbo
$ cross-env NODE_OPTIONS=--inspect next dev --turbo
Debugger attached.
Debugger listening on ws://127.0.0.1:9229/334868f5-1bed-4fb4-9f03-927f7d97a88e
For help, see: https://nodejs.org/en/docs/inspector
Debugger listening on ws://127.0.0.1:9230/75727e1f-0704-465b-acfd-ad57d980bf9e
For help, see: https://nodejs.org/en/docs/inspector
   the --inspect option was detected, the Next.js router server should be inspected at 9230.
  ▲ Next.js 15.0.0-rc.0 (turbo)
  - Local:        http://localhost:3000
  - Environments: .env
  - Experiments (use with caution):
    · reactCompiler

 ✓ Starting...
 ✓ Ready in 1996ms
 ⚠ Webpack is configured while Turbopack is not, which may cause problems.
 ⚠ See instructions if you need to configure Turbopack:
  https://nextjs.org/docs/app/api-reference/next-config-js/turbo

 ○ Compiling / ...
Starting inspector on 127.0.0.1:9230 failed: address already in use
Starting inspector on 127.0.0.1:9230 failed: address already in use
Starting inspector on 127.0.0.1:9230 failed: address already in use
Starting inspector on 127.0.0.1:9230 failed: address already in use
Starting inspector on 127.0.0.1:9230 failed: address already in use
Starting inspector on 127.0.0.1:9230 failed: address already in use
Starting inspector on 127.0.0.1:9230 failed: address already in use
Starting inspector on 127.0.0.1:9230 failed: address already in use
Starting inspector on 127.0.0.1:9230 failed: address already in use
Starting inspector on 127.0.0.1:9230 failed: address already in use
Starting inspector on 127.0.0.1:9230 failed: address already in use
 ✓ Compiled / in 6s
[19:59:15] WARN: No email adapter provided. Email will be written to console. More info at https://payloadcms.com/docs/email/overview.
 GET / 404 in 7404ms
 ○ Compiling /[slug] ...
 ✓ Compiled in 1276ms
 GET / 200 in 677ms

deft shoal Jun 21, 2024, 6:37 AM

#

Hi @zenith harness , struggling with this one too. As this is a problem out of the box with the Payload 3 demo repo, I created an issue:
https://github.com/payloadcms/payload/issues/6882#issue-2365759550

GitHub

Can't get VSCode debugging to work · Issue #6882 · payloadcms/paylo...

Link to reproduction https://github.com/payloadcms/payload-3.0-demo Payload Version 3.0.0-beta.52 Node Version 20.15.0 Next.js Version 15.0.0-rc.0 Describe the Bug Out of the box, I can't possi...

zenith harness Jun 21, 2024, 11:14 AM

#

I fixed but I forgot how, I ll give you my full config when I ll be home

balmy ore Jul 4, 2024, 1:26 PM

#

@zenith harness i'm having same issue. can not hit breakpoint. your debugging now works fine?

zenith harness Jul 4, 2024, 1:28 PM

#

hi I don't remember if it was a vscode settings or a something i change on the project to make it work
My launch.json is the standard one i think

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Next.js: debug server-side",
            "type": "node-terminal",
            "request": "launch",
            "command": "bun run dev"
        },
        {
            "name": "Next.js: debug client-side",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000"
        },
        {
            "name": "Next.js: debug full stack",
            "type": "node-terminal",
            "request": "launch",
            "command": "bun run dev",
            "serverReadyAction": {
                "pattern": "- Local:.+(https?://.+)",
                "uriFormat": "%s",
                "action": "debugWithChrome"
            }
        }
    ]
}

tsconfig

{
    "compilerOptions": {
        "baseUrl": ".",
        "esModuleInterop": true,
        "target": "ESNext",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "incremental": true,
        "jsx": "preserve",
        "module": "esnext",
        "moduleResolution": "bundler",
        "resolveJsonModule": true,
        "sourceMap": true,
        "isolatedModules": true,
        "plugins": [
            {
                "name": "next"
            }
        ],
        "paths": {
            "@payload-config": ["./payload.config.ts"],
            "@/assets/*": ["./public/assets/*"],
            "react": ["./node_modules/@types/react"],
            "@/*": ["./src/*"]
        }
    },
    "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
    "exclude": ["node_modules"],
    "ts-node": {
        "transpileOnly": true,
        "swc": true
    }
}

#

If you still have problems I ll try check again

zenith harness Jul 7, 2024, 5:38 PM

#

some trials

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "server",
            "type": "node-terminal",
            "request": "launch",
            "command": "bun run dev"
        },
        {
            "name": "client",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "attach",
            "port": 9231,
            "skipFiles": ["<node_internals>/**"]
        }
    ],
    "compounds": [
        {
            "name": "Debug Server and Client",
            "configurations": ["server", "client", "attach"]
        }
    ]
}

oblique dagger Jul 15, 2024, 11:52 PM

#

Hi, some news?? I'm with the same problem

zenith harness Jul 21, 2024, 8:04 AM

#

Still have to check this https://github.com/vercel/next.js/issues/62008#issuecomment-2221258928

GitHub

Debugger not binding breakpoints in VSCode in server components, us...

Link to the code that reproduces this issue https://github.com/andrewmartin/nextjs-example To Reproduce Open the code in VSCode Add a breakpoint in any server side files Open the "Run and Debu...

balmy ore Jul 21, 2024, 6:08 PM

#

It’s very challenging working without be able to breakpoint properly

#How to debug

Documentation: