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

Question

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

        {
            "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) 运行服务的客户端 javascript Chrome，不是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

所以这意味着 none 的默认源映射路径覆盖正确解析。

添加 "webpack://_N_E/*": "${webRoot}/*" 作为覆盖修复了这个问题！

另外，请注意 // 双斜杠而不是之前的 /// 三斜杠。

这是我的工作启动配置（将其放在 .vscode/launch.json 中的 configurations 下：

        {
            "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

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

VSCode won't bind client-side breakpoints for nextjs (9.5.2)

visual-studio-code

google-chrome-devtools

next.js

vscode-debugger