vscode编辑器中如何调试nextjs代码

本文涉及的产品
Serverless 应用引擎 SAE,800核*时 1600GiB*时
EMR Serverless StarRocks,5000CU*H 48000GB*H
云原生网关 MSE Higress,422元/月
简介: 代码可调式的重要性不言而喻。对于Programer来说,自己编写的程序能够被优雅调试是一件幸福的事情,特别是习惯了后端程序调试的开发者...在折腾Nextjs项目的日子里,我走了很多弯路才弄明白在vs code中如何优雅的调试代码。

导航

  • 引言
  • 什么是launch.json
  • 新建launch.json
  • 启动调试
  • 断点测试
  • 结语
  • 参考



alt


确保写的代码是可调式的。

引言

代码可调式的重要性不言而喻。

如何保障代码的质量? 那就是自测试。在这么多年的职业生涯中,我逐渐摸索出一个确保代码质量的笨方法——单步调试。

比如,接口提供给前端或者第三方系统使用,我一般会写一些测试用例,对代码进行单步调试。这种方法非常有效,也确实避免了上线之后产生重大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文件。


alt


接下来,在项目的根目录下就会出现一个名为 .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



alt


后者直接按"F5"键盘启动。

启动调试,看看效果吧!


alt


很遗憾,启动报错了!
经过排查,我们发现官方的给的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节点下。


alt


再次启动试试!


alt


大告功成!

断点测试

我们可以在想要调试的代码行,打上断点,然后重新启动调试。


alt


终于可以进入断点调试了!
如果你想单步调试,可以按F10键。

结语

总体来说,vs code 还是比较强大的,支持各种语言的调试。
对于初学者来说,掌握程序调试技能将对学习编程起到事半功倍的效果。
本期的vscode+nextjs+debug实践希望能够帮助到您。

参考

相关文章
|
1月前
|
编译器 C语言 C++
【VS Code】安装配置调试C/C++(一)
【VS Code】安装配置调试C/C++(一)
48 0
|
22天前
|
开发工具 git
vscode设置 git提交代码忽略node_modules,dist,vscode如何设置不提交node_modules,dist
vscode设置 git提交代码忽略node_modules,dist,vscode如何设置不提交node_modules,dist
24 0
|
22天前
|
开发工具 git
vscode 将已修改代码提交推送git时一直转圈也没有反馈
vscode 将已修改代码提交推送git时一直转圈也没有反馈
22 0
|
1月前
|
项目管理 C++
【VS Code】安装配置调试C/C++(二)
【VS Code】安装配置调试C/C++(二)
47 1
|
26天前
|
前端开发 JavaScript PHP
【vscode编辑器插件】前端 php unity自用插件分享
【vscode编辑器插件】前端 php unity自用插件分享
12 0
|
2月前
|
C++
VS code debug c代码 配置
VS code debug c代码 配置
25 0
VSCode 在保存时自动对代码进行修复
在设置中更改如下内容 // 自动修复 "tslint.autoFixOnSave": true
3301 0
|
2月前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
42 0
|
2月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
180 0