Why doesn't debugger work in Nextjs and Vscode?

Question

React

Good afternoon.
I can't understand what is the reason.
There is documentation https://nextjs.org/docs/advanced-features/debugging

In vscode, I went into the project, chose run -> add configuration from the menu, and inserted the code and documentation.

I wrote in package.json

"dev": "NODE_OPTIONS='--inspect' next dev",
        "predev": "fuser -k 3000/tcp && echo 'Terminated' || echo 'Nothing was running on the 3000'",

I run the npm run dev project in the terminal.

Then I go to the browser, open localhost:300 and the page opens.

Then in Vscode -> Start debugging or F5.
The debug panel appears and it is empty.



Then I set a breakpoint, restart the browser, and nothing appears in the debug panel.


Here is the code from the website

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to application",
      "skipFiles": ["<node_internals>/**"],
      "port": 9229
    }
  ]
}

What didn't I learn?

Answer 1

Got it with this configuration.

{
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Next: Chrome",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}"
    },
    {
        "type": "node",
        "request": "launch",
        "name": "Next: Node",
        "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
        "env": {
            "NODE_OPTIONS": "--inspect-brk"
        },
        "port": 9229,
        "console": "integratedTerminal"
    }
],
"compounds": [
    {
        "name": "Next: Full",
        "configurations": ["Next: Node", "Next: Chrome"]
    }
]
}