如何让 Next.js 调试变得有用？

Question

从 Next.js VSCode 调试页面，我得到以下信息launch.json。

{
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

运行完整堆栈选项后，Next.js 会像任何旧的npm run dev. 问题是调试不是很有用。在我的调试终端中，我选择了它，以便在捕获的异常上有断点。在 Python 应用程序中（这是我的调试经验所在），只要出现异常，VSCode 就会在确切的行号处暂停，并给出有用的、可理解的错误。

对于 Next.js，断点给我带来了一个复杂的、普遍的错误，导致一些随机的 Next.js 源代码。这对我来说几乎没有任何意义。

例如，我收到一个承诺被拒绝的错误。这可能来自我使用 Axios 处理的请求.catch。Next.js 向我指出了以下深度嵌套的文件。

\node_modules\next\dist\server\dev\on-demand-entry-handler.js

在第 202 行，它捕获了一个我以前从未见过的代码错误。取消暂停断点后，会导致更多此类错误。

如何更有效地为我调试 Next.js？我想要更清晰、更容易理解的错误，从而引导我找到我实际编写的特定代码行。

Answer 1

解决方案

我选择了它，以便在捕获和未捕获的异常上有断点

取消选中“捕获异常”可能会导致您寻求的调试行为。

解释

看来您可能误解了检查“捕获的异常”的作用。在捕获的异常上启用断点意味着调试器将在所有捕获的异常上暂停：您的代码和所有 JavaScript 依赖项都包含在内（包括诸如 之类的文件\node_modules\next\dist\server\dev\on-demand-entry-handler.js）

在第 202 行，它捕获了一个我以前从未见过的代码错误。取消暂停断点后，会导致更多此类错误。

这是预期的行为，因为 try/catch 语句是 JavaScript 中捕获意外行为和错误的标准做法，因此只要检查了 Caught Exceptions，调试器就会暂停所有这些语句。catch 语句意味着发生了预期的错误，因此在调试情况下暂停它可能没有意义！

未捕获的异常中断更有可能在有意义的错误和异常上暂停，这意味着抛出了意外错误并且未在 try/catch 语句内捕获。依赖项很可能不会有任何未捕获的异常（如果有，则可能被视为错误），因此允许调试器主要捕获代码中的错误。