introduction

我们应该如何调试我们的next.js 前端以及后端项目(并具有完整的资源映射 - 源码映射) - 通过 vsCode 调试器 或者 Chrome 开发工具 ..

任何一个能够 依附于Node.js 的调试器能够被用来调试Next.js 应用,你能够了解Node.js Debugging Guide来学习更多 …

使用VS code 调试

首先你需要创建一个名为 .vscode/launch.json到项目的根中并填充以下内容

  1. {
  2.   "version": "0.2.0",
  3.   "configurations": [
  4.     {
  5.       "name": "Next.js: debug server-side",
  6.       "type": "node-terminal",
  7.       "request": "launch",
  8.       "command": "npm run dev"
  9.     },
  10.     {
  11.       "name": "Next.js: debug client-side",
  12.       "type": "pwa-chrome",
  13.       "request": "launch",
  14.       "url": "http://localhost:3000"
  15.     },
  16.     {
  17.       "name": "Next.js: debug full stack",
  18.       "type": "node-terminal",
  19.       "request": "launch",
  20.       "command": "npm run dev",
  21.       "console": "integratedTerminal",
  22.       "serverReadyAction": {
  23.         "pattern": "started server on .+, url: (https?://.+)",
  24.         "uriFormat": "%s",
  25.         "action": "debugWithChrome"
  26.       }
  27.     }
  28.   ]
  29. }

npm run dev能够替换为 yarn dev,如果你使用yarn,如果你改变了应用启动的端口,你可以替换3000 为任意使用的端口 ..

现在让我们来到调试面板(CTRL+SHIFT+D(windows / linux), 或者 ⇧+⌘+D on macOS),选择一个启动配置,然后通过F5或者选择调试(来自调试面板上的start debugging)启动调试会话 …

通过 chrome DevTools 进行调试

客户端代码

通过next dev或者npm run dev或者yarn dev启动开发服务器,一旦开发服务器启动,然后打开http://localhost:3000或者你自定义的URL在Chrome中,然后打开chrome的开发调试器(CTRL+Shift+J(windows/linux),⌥+⌘+I on macOS)然后点击Sources 标签 ..

现在客户端中任意时间到达<font style="color:rgb(17, 17, 17);">debugger</font>语句的代码都能够被调试(执行将会被暂停并且文件将会出现在debug 区域),你能够按压CTRL+P(window / linux) 或者 ⌘+P on macOS 去查找一个文件并手动的设置端点 … 注意当你在这里开始查询的时候,你的源文件路径以<font style="color:rgb(17, 17, 17);">webpack://_N_E/./</font>开始 ..

服务端代码

为了使用Chrome 开发工具调试服务端Next.js 代码,你能够传递—inspect 标志到Node.js 进程 ..

  1. NODE_OPTIONS='--inspect' next dev

如果你使用npm run dev或者 yarn dev,那么你应该在package.json中更新dev脚本

  1. "dev": "NODE_OPTIONS='--inspect' next dev"

通过--inspect标志启动Next.js 开发服务器,将会打印如下信息

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

记住,通过NODE_OPTIONS='--inspect' npm run dev或者NODE_OPTIONS='--inspect' yarn dev将不会工作 …

这可能将在相同端口启动多个debugger(这将尝试在同一端口上启动多个调试器：一个用于 npm/yarn 进程，一个用于 Next.js),你可能会得到一些错误Staring inspector on 127.0.0.1:9229 failed: address already in use

一旦服务器启动,在chrome中打开一个新的tab然后查看 chrome://inspect,这里你能够发现你的Next.js 应用存在于远程目标部分,点击位于应用下方的监控(inspect) 然后打开一个独立的开发工具窗口,然后点击Sources 标签页 …

Debugging 服务端代码就像类似于在客户端代码调试,除了搜索的文件不一样(文件的源路径为webpack://{application-name}/./这里的应用名称将被package.json文件的应用名称进行替换) …

windows上进行调试

windows 用户也许会存在一个问题(当使用NODE_OPTIONS='--inspect',因为这个语法在windows上不支持,为了解决这个问题 ，安装cross-env包作为一个开发依赖(通过npm --dev或者 yarn -D),然后去替换dev脚本,例如:

  1. "dev": "cross-env NODE_OPTIONS='--inspect' next dev",

cross-env将会设置NODE_OPTIONS环境变量(不管你处于那个平台) -包括 windows / mac / linux,然后允许你跨设备和操作系统调试 ..

更多信息

为了学习如何使用js 调试器,查看以下文档