[NEXT-1179] Chrome dev tools debugging

[EmilioHerreraSoukup]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.19.0
      npm: 8.19.3
      Yarn: N/A
      pnpm: 8.3.1
    Relevant packages:
      next: 13.3.1
      eslint-config-next: 13.3.1
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

N/A

To Reproduce

Add a debugger line after running the app via "NODE_OPTIONS='--inspect' next dev

Describe the Bug

Happened after upgrading from next 12 to 13:

• Chrome dev tools should stop execution in the debugger line. Now is not being detected, execution just continues.

Expected Behavior

Chrome dev tools should stop execution in the debugger line

Which browser are you using? (if relevant)

Chrome 112.0.5615.137

How are you deploying your application? (if relevant)

No response

_NEXT-1179

[shuding]

In latest version of Next.js we run multiple Node.js processes, so the --inspect arg only got passed to the main process. CC @ijjk shall we always forward that (and set new ports for workers with a output message)?

[pauledwards241]

I've just tried this in version 13.4.0 and it still does not allow server side debugging.

Prior to version 13.3.x, it (mostly) worked by following the workaround posted by @icyJoseph

It can be reproduced quite quickly using the TypeScript Next.js example

[jonnywyatt]

Just wondering if this is being prioritised? It's quite a major impediment to developing production apps with Next.js 13

[juhahe]

Ran into this issue as well. As mentioned above, the issue is that the debug server is started on the wrong node process. As a workaround, you can start debug servers on any of the running processes started by next by sending them USR1 signal (https://nodejs.org/en/docs/guides/debugging-getting-started#enable-inspector).

I observed that next starts three processes like node /my/path/to/node_modules/next/dist/compiled/jest-worker/processChild.js. I haven't gone through the source code to understand what those processes do and don't know if this works at all in general, but so far on my system (macOS) the middle process when ordered by IDs has been the server process I've wanted to debug when I've set breakpoints in Route Handlers. So I've been using this hacky workaround in my package.json scripts run with bash:

    "debug": "kill -USR1 \"$(pgrep -f \"node ${PWD}/.*node_modules/next/.*/jest-worker\" | head -2 | tail -1)\"",
    "debug-cli": "npm run debug && node inspect 127.0.0.1:9229",

When the next server is up and running, npm run debug sends USR1 signal to the "middle" jest-worker node process which then starts the debug server and you can connect to it with an inspector client like Chrome DevTools. Alternatively, npm run debug-cli starts the debug server and also connects the nodejs built-in CLI debugger to it.

[juhahe]

It appears a fix is being worked on here #48019

[pauledwards241]

It appears a fix is being worked on here #48019

I notice this fix was merged as part of v13.4.4, but I'm still unable to debug. Has anyone else had any luck with the latest release?

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.