Closed martaver closed 3 years ago
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.
@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.
Have you tried following the instructions in the SO issue I linked?
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
}
]
}
@OG84 Sourcemap locations are still wrong for both Node and Chrome with that config
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.
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 theready - started server on http://localhost:3000
in aJavascript 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 of9.5.2
(or possibly earlier) the following properties in the configuration inlaunch.json
is necessary for client-side sourceMaps to be resolved and for breakpoints set in vscode to bind: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:
vscode-js-debug
plugin:Debugger for Chrome
Hope my points are valid and I'm not missing something blatantly obvious with all of this :)