VSCode 不会为 nextjs (9.5.2) 绑定客户端断点

Question

在最近一次对 nextjs 的更新中，vscode 中的客户端 chrome 调试似乎已经损坏。当我启动以下配置时，我的断点都没有被绑定：

        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug Chrome on localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/pathto/myapp"
        },

请注意，我在VSCode (v1.48.1) 上使用Debugger for Chrome (v4.12.10) 扩展，并且我正在调试由nextjs (v9.5.2) 在Chrome 中运行的客户端javascript，而不是nextjs 节点进程。

有谁知道发生了什么变化以及如何让调试器再次绑定断点？

Answer 1

以前，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 团队意识到它！

https://github.com/vercel/next.js/issues/16442