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"
        },

请注意，我正在使用Debugger for Chrome (v4.12.10)扩展程序，VSCode (v1.48.1)并且正在调试通过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}/*"
            }

不过，如果您查看sourceschrome devtools，您可以在神秘路径下找到源映射_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