导航
- 引言
- 什么是launch.json
- 新建launch.json
- 启动调试
- 断点测试
- 结语
- 参考
确保写的代码是可调式的。
引言
代码可调式的重要性不言而喻。
如何保障代码的质量? 那就是自测试。在这么多年的职业生涯中,我逐渐摸索出一个确保代码质量的笨方法——单步调试。
比如,接口提供给前端或者第三方系统使用,我一般会写一些测试用例,对代码进行单步调试。这种方法非常有效,也确实避免了上线之后产生重大bug的出现。
对于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节点下。
再次启动试试！
大告功成！
断点测试
我们可以在想要调试的代码行，打上断点，然后重新启动调试。
终于可以进入断点调试了！
如果你想单步调试，可以按F10键。
结语
总体来说，vs code 还是比较强大的，支持各种语言的调试。
对于初学者来说，掌握程序调试技能将对学习编程起到事半功倍的效果。
本期的vscode+nextjs+debug实践希望能够帮助到您。
