调试器未使用 VS Code 在 Next.js 中命中断点

Question

我一直在尝试使用 VS Code 调试我的 Next.js 应用程序，但调试器没有到达断点，即使我已经正确配置了所有内容（我认为！）。这是我到目前为止所做的：

我已采取的步骤：

1. 我使用以下方式运行应用程序：

   npm run debug
   

   这对应于我的

   package.json

   中的以下脚本：

   "scripts": {
     "debug": "cross-env NODE_OPTIONS='--inspect' next dev"
   }
   

2. 我在代码中设置断点，然后在浏览器中重新加载页面以命中断点。

3. 我在 VS Code 中按 F5 启动调试器。我的

   launch.json

   文件作为截图附在下面。

4. 我的

   tsconfig.json

   已为源映射正确设置

   sourceMap: true

   。

问题：

尽管执行了这些步骤，断点并未被命中，并且调试器不会在预期的行处暂停执行。当我运行一个更简单的 JavaScript 文件时，一切正常。该问题似乎仅发生在我的 Next.js 应用程序中。

这是我的

launch.json

：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Next.js",
            "skipFiles": ["<node_internals>/**"],
            "port": 9229
        }
    ]
}

到目前为止我尝试过的：

• 按照描述运行

  npm run debug

  。
• 使用 npx 确保本地版本的 Next.js 正在运行。
• 使用

  npm run build -- --no-cache

  清除 Next.js 缓存。
• 确保在我的

  sourceMap: true

  和 Next.js 配置中使用

  tsconfig.json

  正确启用源映射。

还有其他人遇到过这个问题吗？为了确保调试器命中 Next.js 应用程序中的断点，我在设置中可能会缺少什么？

Answer 1

对我有什么帮助：

我通过切换到WebStorm成功解决了这个问题。 Next.js 调试配置 在那里运行良好，并且成功命中断点。

但是，我仍在寻找一种解决方案，以使调试器在 Next.js 的 VS Code 中正常工作。任何有关如何在 VS Code 中解决此问题的进一步见解将不胜感激！