visual-studio-code - VSCode 不会为 nextjs (9.5.2) 绑定(bind)客户端断点

Question

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

        {
            "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) 提供的客户端 javascript在 Chrome 中运行，而不是 nextjs 节点进程。
有谁知道发生了什么变化以及如何让调试器再次绑定(bind)断点？

Answer 1

以前，vscode 将(默认情况下)使用以下源映射路径来解释 webpack 提供的源映射:

            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*",
                "meteor://💻app/*": "${webRoot}/*"
            }

如果您查看 sources但是，在 chrome 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