问题描述
在nextjs的最新更新中，vscode中的客户端chrome调试似乎已中断。当启动以下配置时，没有断点绑定：
{
"type": "chrome","request": "launch","name": "Debug Chrome on localhost","url": "http://localhost:3000","webroot": "${workspaceFolder}/pathto/myapp"
},请注意，我正在Debugger for Chrome (v4.12.10)上使用VSCode (v1.48.1)扩展名，并且正在调试在Chrome中运行的nextjs (v9.5.2)提供的客户端javascript，而不是nextjs节点进程。
有人知道更改了什么，如何使调试器再次绑定断点？
解决方法
以前，vscode（默认情况下）将使用以下源映射路径来解释由webpack提供的源映射：
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/*","webpack:///src/*": "${webRoot}/*","webpack:///*": "*","webpack:///./~/*": "${webRoot}/node_modules/*","meteor://?app/*": "${webRoot}/*"
}
但是，如果您在chrome devtools中查看sources，则可以在神秘的_N_E路径下找到源地图（橙色文件夹表示具有源地图的源）。
在最近的一次更新中，为准备webpack 5，nextjs团队更改了提供源地图的路径：https://github.com/vercel/next.js/pull/15955
因此，这意味着没有默认的源映射路径替代能够正确解析。
添加"webpack://_N_E/*": "${webRoot}/*"作为替代可以解决此问题！
另外，请注意//的双斜杠，而不是前面的///的三斜杠。
这是我正在工作的启动配置（将其放在configurations中的.vscode/launch.json下：
{
"type": "chrome","request": "launch","name": "Debug Chrome on localhost","url": "http://localhost:3000","webRoot": "${workspaceFolder}/pathto/myapp","sourceMapPathOverrides": {
"webpack://_N_E/*": "${webRoot}/*"
}
},不要忘记将/ pathto / myapp更改为存储库中应用程序根目录的路径。如果使用的话，也可能以/src结尾。如果您直接使用nextjs，也可以将其完全删除！
希望这对某人有帮助！当然让我困惑中挠头...
编辑：
我实际上在nextjs处提出了一个问题，指出了其文档中的一些问题。如果还有很多其他人有这个问题，我建议在那做个笔记，以便nextjs团队意识到这一点！