nextjs debugger not properly listening inside docker container

Question

I have the feeling that my debugger doesn't do anything, even thou it is connected:

I am trying to connect via my visual studio code to the debugger to debug my nextjs app. But it ignores all the breakpoints.. My configuration looks fine to me:

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Docker: Attach to Node",
        "type": "node",
        "request": "attach",
        "port": 9229,
        "address": "localhost",
        "localRoot": "${workspaceFolder}",
        "remoteRoot": "/usr/src/app",
        "protocol": "inspector",
        "skipFiles": [
          "${workspaceFolder}/node_modules/**/*.js",
          "<node_internals>/**/*.js"
        ]
      }
    ]
  }

Answer 1

You need to make sure that your Docker debugger port is mapped to your host machine port.

docker-compose.yml:

version: '3'

services:
  app:
    image: node:18-alpine
    ports:
      - '3000:3000'
      - '9229:9229' # ← this
    volumes:
      - .:/home/node/app
      - node_modules:/home/node/app/node_modules
    working_dir: /home/node/app/
    command: sh -c "corepack enable && corepack prepare pnpm@latest --activate && pnpm install && pnpm dev"
    env_file:
      - .env

volumes:
  data:
  node_modules:

…otherwise the debugger is listening on port 9229 inside Docker and the client is attempting to attach to port 9229 on the host machine, but there's no bridge between the two.

Here's also my launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Next.js Docker",
            "type": "node",
            "request": "attach",
            "port": 9229,
            "address": "localhost",
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "/app/"
        }
    ]
}

…and the scripts in my package.json:

{
    "scripts": {
        "dev": "NODE_OPTIONS='--inspect=0.0.0.0:9228' next dev",
        "docker": "docker compose up --build --no-log-prefix --attach app"
    }
}

I use the regular Next.js Dockerfile and run my app with pnpm docker. This then runs Docker, which starts pnpm dev.

Note: The --inspect flag uses port 9228, rather than 9229, because there are two debuggers spawned, for some reason:

> @ dev /home/node/app
> NODE_OPTIONS='--inspect=0.0.0.0:9228' next dev

Debugger listening on ws://0.0.0.0:9228/f34f0a1c-d081-440c-afd1-41d76a99c9ad
For help, see: https://nodejs.org/en/docs/inspector
Debugger listening on ws://0.0.0.0:9229/b61d2932-2175-42aa-ad39-3eb41b042358
For help, see: https://nodejs.org/en/docs/inspector
   the --inspect option was detected, the Next.js router server should be inspected at 0.0.0.0:9229.

By using 9228 I can get the correct one to spawn on 9229. There is more info about this in issues #45697 and #47083 in the Next.js repo.