Sponsor
ntab.devntab.dev 提升效率的新标签页组件
点击查看
Menu

Debugging

本文档介绍了如何通过 VS Code 调试器Chrome DevToolsFirefox DevTools 使用完整的源映射支持来调试 Next.js 前端和后端代码。

任何可以连接到 Node.js 的调试器都可以用于调试 Next.js 应用程序。你可以在 Node.js 调试指南中找到更多详细信息。

使用 VS Code 进行调试

在项目根目录创建一个名为 .vscode/launch.json 的文件,内容如下:

launch.json
{
  "version": "0.2.0",
  "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 client-side (Firefox)",
      "type": "firefox",
      "request": "launch",
      "url": "http://localhost:3000",
      "reAttach": true,
      "pathMappings": [
        {
          "url": "webpack://_N_E",
          "path": "${workspaceFolder}"
        }
      ]
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/next",
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
      "serverReadyAction": {
        "action": "debugWithEdge",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}"
      }
    }
  ]
}

注意:要在 VS Code 中使用 Firefox 调试,你需要安装 Firefox Debugger 扩展

如果你使用的是 Yarn,可以将 npm run dev 替换为 yarn dev,如果使用的是 pnpm,则替换为 pnpm dev

在"Next.js: debug full stack"配置中,serverReadyAction.action 指定了服务器准备好时要打开的浏览器。debugWithEdge 表示启动 Edge 浏览器。如果你使用的是 Chrome,请将此值更改为 debugWithChrome

如果你更改了应用程序启动的端口号,请将 http://localhost:3000 中的 3000 替换为你使用的端口。

如果你从非根目录运行 Next.js(例如,如果你使用的是 Turborepo),则需要将 cwd 添加到服务器端和全栈调试任务中。例如,"cwd": "${workspaceFolder}/apps/web"

现在转到调试面板(Windows/Linux 上的 Ctrl+Shift+D,macOS 上的 ⇧+⌘+D),选择一个启动配置,然后按 F5 或从命令面板中选择 Debug: Start Debugging 以开始调试会话。

在 Jetbrains WebStorm 中使用调试器

点击列出运行时配置的下拉菜单,然后点击 Edit Configurations...。创建一个以 http://localhost:3000 作为 URL 的 JavaScript Debug 调试配置。根据你的喜好进行自定义(例如,用于调试的浏览器,存储为项目文件),然后点击 OK。运行此调试配置,所选浏览器应自动打开。此时,你应该有两个处于调试模式的应用程序:NextJS node 应用程序和客户端/浏览器应用程序。

使用浏览器 DevTools 进行调试

客户端代码

通过运行 next devnpm run devyarn dev 正常启动开发服务器。服务器启动后,在你喜欢的浏览器中打开 http://localhost:3000(或你的替代 URL)。

对于 Chrome:

  • 打开 Chrome 的开发者工具(Windows/Linux 上的 Ctrl+Shift+J,macOS 上的 ⌥+⌘+I
  • 转到源代码选项卡

对于 Firefox:

  • 打开 Firefox 的开发者工具(Windows/Linux 上的 Ctrl+Shift+I,macOS 上的 ⌥+⌘+I
  • 转到调试器选项卡

在任一浏览器中,每当你的客户端代码遇到 debugger 语句时,代码执行将暂停,并且该文件将出现在调试区域中。你还可以搜索文件以手动设置断点:

  • 在 Chrome 中:Windows/Linux 上按 Ctrl+P,macOS 上按 ⌘+P
  • 在 Firefox 中:Windows/Linux 上按 Ctrl+P,macOS 上按 ⌘+P,或使用左侧面板中的文件树

请注意,在搜索时,你的源文件的路径将以 webpack://_N_E/./ 开头。

服务器端代码

要使用浏览器 DevTools 调试服务器端 Next.js 代码,你需要将 --inspect 标志传递给底层 Node.js 进程:

Terminal
NODE_OPTIONS='--inspect' next dev

值得注意的是:使用 NODE_OPTIONS='--inspect=0.0.0.0' 允许在 localhost 之外进行远程调试访问,例如在 Docker 容器中运行应用程序时。

如果你使用的是 npm run devyarn dev,那么你应该更新 package.json 中的 dev 脚本:

package.json
{
  "scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev"
  }
}

使用 --inspect 标志启动 Next.js 开发服务器将看起来像这样:

Terminal
Debugger listening on ws://127.0.0.1:9229/0cf90313-350d-4466-a748-cd60f4e47c95
For help, see: https://nodejs.org/en/docs/inspector
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

对于 Chrome:

  1. 打开一个新标签页并访问 chrome://inspect
  2. 点击**配置...**确保列出了两个调试端口
  3. 如果尚未存在,添加 localhost:9229localhost:9230
  4. 远程目标部分查找你的 Next.js 应用程序
  5. 点击检查打开一个单独的 DevTools 窗口
  6. 转到源代码选项卡

对于 Firefox:

  1. 打开一个新标签页并访问 about:debugging
  2. 在左侧边栏中点击此 Firefox
  3. 远程目标下,找到你的 Next.js 应用程序
  4. 点击检查打开调试器
  5. 转到调试器选项卡

调试服务器端代码的方式与客户端调试类似。在搜索文件时(Ctrl+P/⌘+P),你的源文件的路径将以 webpack://{application-name}/./ 开头(其中 {application-name} 将根据你的 package.json 文件中的名称进行替换)。

使用浏览器 DevTools 检查服务器错误

当你遇到错误时,检查源代码可以帮助追踪错误的根本原因。

Next.js 会在错误覆盖层的 Next.js 版本指示器下方显示一个 Node.js 图标。通过点击该图标,DevTools URL 将被复制到你的剪贴板。你可以使用该 URL 在新的浏览器标签页中检查 Next.js 服务器进程。

在 Windows 上调试

Windows 用户在使用 NODE_OPTIONS='--inspect' 时可能会遇到问题,因为 Windows 平台不支持该语法。为了解决这个问题,可以安装 cross-env 包作为开发依赖(使用 npmyarn 时带有 -D),并用以下内容替换 dev 脚本。

package.json
{
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev"
  }
}

无论你使用的是哪个平台(包括 Mac、Linux 和 Windows),cross-env 都将设置 NODE_OPTIONS 环境变量,允许你在不同设备和操作系统上一致地进行调试。

值得注意的是:确保在你的机器上禁用 Windows Defender。这个外部服务会检查_每个读取的文件_,据报道会大大增加使用 next dev 的 Fast Refresh 时间。这是一个已知问题,与 Next.js 无关,但确实会影响 Next.js 开发。

更多信息

要了解有关如何使用 JavaScript 调试器的更多信息,请查看以下文档: