Incorrect / missing documentation for debugging client-side javascript in VS Code

[martaver]

Bug report

Describe the bug

As best as I can tell, the documentation at https://nextjs.org/docs/advanced-features/debugging only describes how to configure debugging for the node process in vscode. It doesn't provide any specific instructions on how to debug code that is run in browser, in chrome at the client side.

I think this is problematic because (speaking for myself) most of the debugging I want to do is client-side debugging. nextjs is mostly a black box to me, and I am blissfully unaware.

It does, however, offer instructions on how to use chrome devtools to remotely debug the nextjs process... which I find a little confusing and misleading. It seems to suggest that this will somehow allow you to debug client-side javascript by simply attaching to the node process. I think this should be clarified.

If you are assuming the user is on the latest version of vscode-js-debug (https://github.com/microsoft/vscode-js-debug) and are assuming the user is clicking on the ready - started server on http://localhost:3000 in a Javascript Debug Terminal, then this should also explicitly be explained. These are new features and not obvious.

I think the documentation should also point out a valid launch configuration for those who are using Debugger for Chrome and want to debug the client-side javascript only, also showing how to modify it when using /src or when the app is at a subpath from the ${workspaceFolder}.

In particular, the need to use a custom sourceMapPathOverrides should be mentioned, as of 9.5.2 (or possibly earlier) the following properties in the configuration in launch.json is necessary for client-side sourceMaps to be resolved and for breakpoints set in vscode to bind:

            "webRoot": "${workspaceFolder}/pathto/app",
            "sourceMapPathOverrides": {
                "webpack://_N_E/*": "${webRoot}/*"
            }

When clicking on links in a Javascript Debug Terminal, then these properties need to be set in VSCode's settings here:

I found all this out the hard way, chronicling my adventures here: https://stackoverflow.com/questions/63523469/how-can-i-configure-chrome-debugging-in-vscode-for-nextjs-9-5-2

In summary:

• [ ] make a distinction between client-side and server-side debugging instructions
• [ ] when using the (latest) vscode-js-debug plugin:
  • [ ] point out the need to open a Javascript Debug Terminal and click on the served link
  • [ ] point out the need to set webRoot (if at a subpath) and sourceMapOverrides in VSCode settings
• [ ] when using Debugger for Chrome
  • [ ] provide a valid example launch configuration
  • [ ] include the sourceMapOverride
  • [ ] point out the need to add webRoot if at a subpath

Hope my points are valid and I'm not missing something blatantly obvious with all of this :)

[johnculviner]

Second this - for the life of me I cannot get debugging of next.js (with source maps) working when I do next export (for production) . I think this might be related.

[kolpav]

@martaver Have you made any progress on this? It seems impossible to attach to client side js. Official docs ignore client side debugging entirely and most of the other resources assume you are going to use vscode to launch nextjs in repo containing just nextjs. Me using monorepo, typescript and docker-compose adds so many layers of complexity that after 3 hours of trying and then seeing you digging through PRs to find paths as "webpack://_N_E/*" I kind of gave up.

[martaver]

Have you tried following the instructions in the SO issue I linked?

[OG84]

This is what I'm using for Client and Server Side debugging in Next v11 (out of the box, project in root)

For client side debugging, e.g. chrome has to be started with --remote-debugging-port=9222.

vscode .vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Client Side",
            "port": 9222,
            "request": "attach",
            "type": "pwa-chrome",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Server Side",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "port": 9229
        }
    ]
}

[pcjmfranken]

@OG84 Sourcemap locations are still wrong for both Node and Chrome with that config

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.