Node.js 调试的正确方式

你可以像调试前端代码一样轻松地即时调试 Node.js ，不需要完全依赖 console.log()。

更重要的是，你甚至可以使用你已经习惯的浏览器开发工具来调试你的应用程序 — 包括停在 debugger 关键字处、设置断点、检查本地状态等等。

首先，你需要使用--inspect-brk标志启动你的 node.js 进程。

例如，使用 node：

node server.js --inspect-brk

或者使用 yarn：

yarn test --inspect-brk

或者 npm：

npm start -- --inspect-brk

现在，打开任何一个Edge或 Chrome 开发工具窗口，点击这个小绿色的Node.js徽标按钮：

一个新的 DevTools 实例将会打开并连接到 node 进程！
如果 DevTools 中没有 Node.js 图标：

• 1. 前往chrome://inspect网址。
• 2. 点击“为 Node 打开专用 DevTools”。
• 3. 前往连接标签。
• 4. 点击添加连接。
• 5. 添加一个与 node 监听端口匹配的连接；例如，localhost:9229。

调试异常

如果你想调试一个抛出的异常，前往源代码标签，点击带有暂停符号的八角形按钮。这会导致 Chrome DevTools 在任何未捕获的抛出异常时停止。

你也可以切换到“捕获异常时暂停”的复选框，但这可能会导致调试器在其他库用于特征检测或控制流的许多捕获的异常上停止。

如果你的异常被第三方库处理，这可能会很方便。

有时，并没有一个特定的异常，只是一些你已经缩小到一个特定函数的奇怪行为。

在这种情况下，你可以使用 debugger 语句，让执行在达到该语句时停止。这对回答诸如“变量的值现在是什么？”和“这段代码是否正在执行？”等问题很有用。

添加断点

在行号区域单击以创建断点。

有时你想要调试一个在错误发生之前执行多次的循环。你可以在行号区域右键单击，然后点击“添加条件断点…”

这将提示你输入一个表达式来评估，并且只有当该表达式为真时调试器才会暂停。这样你就可以跳过除了感兴趣的那个迭代以外的所有迭代。

–inspect 和 –inspect-brk 之间有什么区别？

--inspect-brk 在启动 node 时立即暂停执行，而 --inspect 则在遇到 debugger 语句并且有附加的调试器时才暂停执行。

我通常更喜欢 --inspect-brk，因为它给我时间附加调试器，而当仅使用--inspect时，执行可能会在我有机会附加 Chrome DevTools 之前结束！

调试一切！

但是如果你需要调试一个不是用node my-script.js启动的 node 脚本（例如，next dev 或 webpack build），该怎么办呢？

你可以通过使用 NODE_OPTIONS 来实现，例如：

NODE_OPTIONS='--inspect-brk' next dev

现在你可以运行你的 Next.js 应用程序或任何其他 node.js 进程，它将在启动时暂停并等待调试器。

你还可以相应地更新 package.json 中的脚本，例如：

"dev-debug": "NODE_OPTIONS='--inspect' next dev"

现在，每当你运行 npm run dev-debug 时，你都可以随时打开你的浏览器开发工具进行检查。

在 VS Code 中直接调试

你也可以直接在你的 IDE 中简单地进行调试。

你所需要做的就是创建一个.vscode/launch.json文件，其中包含你想要调试的任何任务，例如：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug nextjs", // 给你的任务一个名字
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev" // 输入要运行的命令
    }
  ]
}

这就是全部！现在你可以在你的 IDE 中输入断点并直接进行调试。

此外，你甚至可以通过指定 “type”: “chrome” 并提供一个 URL 来直接在 VS Code 中调试客户端代码，例如：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug client-side", // 给你的任务一个名字
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000" // 输入它将要在的 URL
    }
  ]
}

或者，你甚至可以通过使用以下配置来同时调试两者（全栈调试）：

{
  "version": "0.2.0",
  "configurations": [
  {
      "name": "Debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}