vscode中如何调试nextjs

创作时间:

作者:

@小白创作中心

vscode中如何调试nextjs

引用

来源

https://www.52interview.com/solutions/84

引言

代码可调式的重要性不言而喻。
在《对几次通宵加班发版的复盘和思考》一文中，笔者做了比较深入的探讨。
对于Programer来说，自己编写的程序能够被优雅调试是一件幸福的事情，特别是习惯了后端程序调试的开发者...
在折腾Nextjs项目的日子里，我走了很多弯路才弄明白在vs code中如何优雅的调试代码。

什么是launch.json

VS Code
调试器或
Chrome
开发工具调试具有完整源映射支持的
Next.js
前端和后端代码。
任何可以附加到
Node.js
的调试器也可以用于调试 Next.js 应用。
在 Visual Studio Code (VS Code) 中，
launch.json
是一个用于配置调试会话的重要文件。它定义了如何启动和配置调试器，以及代码在调试过程中的行为。
作用和重要性：
launch.json
文件的主要作用是提供一个结构化的配置方式，以便在 VS Code 中启动和管理不同类型的调试会话。它定义了许多调试相关的参数，如调试器的类型、运行参数、环境变量等，从而在调试过程中能够提供更多的控制和定制。
通过合理配置 launch.json，你可以实现以下功能：

指定调试目标：你可以告诉调试器要调试的是哪个文件、哪段代码，以及启动参数等。
设置断点：可以在代码中设置断点，使得在调试时可以暂停执行，方便查看变量、堆栈等信息。
定制调试环境：你可以指定程序运行的环境变量、工作目录等，以模拟特定的调试场景。
多种调试器支持： launch.json 支持多种不同编程语言和框架的调试器，包括 Node.js、Python、Java 等。

新建launch.json

1、打开vs code 编辑器，选择 "Run"-"Add Configuration",添加launch.json文件。

接下来，在项目的根目录下就会出现一个名为 .vscode/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 full stack",  
      "type": "node-terminal",  
      "request": "launch",  
      "command": "npm run dev",  
      "serverReadyAction": {  
        "pattern": "- Local:.+(https?://.+)",  
        "uriFormat": "%s",  
        "action": "debugWithChrome"  
      }  
    }  
  ]  
}

这是官方文档的示例，可能对于很多像我一样的开发者不是太友好。
所以，我们给他翻译翻译~
2、常见字段及其含义
在
launch.json
配置文件中，常见的字段和其含义如下：

"version"：指定 launch.json 文件的格式版本。通常使用 "0.2.0"。
"configurations"：一个包含多个调试配置的数组。每个配置是一个 JSON 对象，包含以下字段：
"name"：调试配置的名称，用于在 VS Code 菜单中显示。
"type"：指定调试器的类型，如 "node"、"python" 等。
"request"：指定调试请求类型，通常为 "launch"（启动调试）或 "attach"（附加到已运行的进程）。
"program"：指定要调试的程序或脚本的路径。
"cwd"：指定工作目录，即调试会话开始时的当前工作目录。
其他可选字段：不同的调试器可能支持不同的字段，用于配置更详细的调试行为。
这样一看，大家应该就明白了吧。

启动调试

vs code启动调试很简单。鼠标左键单击左边菜单的小虫子按钮,然后选择
Nextjs: debug server-side

后者直接按"F5"键盘启动。
启动调试，看看效果吧！
很遗憾，启动报错了！
经过排查，我们发现官方的给的
launch.json
配置文件的示例是默认启动目录是根目录，而我们的这个项目是需要在子目录中启动的。
那我们要如何解决呢？
在仔细看看官方文档，发现有这几句话：
If you're running Next.js from a directory other than root (for example, if you're using Turborepo) then you need to add cwd to the server-side and full stack debugging tasks. For example, "cwd": "${workspaceFolder}/apps/web".
翻译过来，大致如下：
如果你从根目录以外的目录运行 Next.js（例如，如果你使用 Turborepo），则需要将 cwd 添加到服务器端和全堆栈调试任务。例如，"cwd": "${workspaceFolder}/apps/web"。
注意我们启动的是
server-side
，所以"cwd": "${workspaceFolder}/apps/web"应该配置
server-side
节点下。
再次启动试试！
大告功成！