vscode中对node项目进行断点调试

文章目录

  • [创建 launch 配置文件](#创建 launch 配置文件)
  • 修改配置项

创建 launch 配置文件

点击左侧的【运行和调试】图标

点击【添加配置】按钮

选择【Node.js】,就会在项目根目录下的 .vscode 中生成 launch.json 文件


修改配置项

json 复制代码
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    // 启动配置文件的版本号,用于指定当前 launch.json 文件遵循的格式版本
    "version": "0.2.0",
    // 启动配置的数组,可以包含多个不同的启动配置
    "configurations": [
        {
            // 调试器的类型,这里表示使用 Node.js 调试器
            "type": "node",
            // 请求的调试操作类型,"launch" 表示启动一个新进程进行调试
            "request": "launch",
            // 当前调试配置的名称,会显示在调试器的启动配置下拉菜单中
            "name": "启动h5-server",
            // 需要跳过调试的文件列表,调试时不会进入这些文件的代码
            "skipFiles": [
                "<node_internals>/**",
                "${workspaceFolder}/node_modules/**/*.js"
            ],
            // 要启动调试的主程序文件路径
            "program": "${workspaceFolder}/bin/www",
            // 指定 Node.js 的运行时版本
            "runtimeVersion": "15.14.0"
        }
    ]
}
```

---

# 添加断点

在代码左侧单击或右键添加断点,添加完成后,如下图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/671cb51113c44d2d881bcf19cfedf872.png)

# 开始调试

下图箭头处提供了2种启动调试模式的方式
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/3ba8c915890d47ae8f803c102c764a2b.png)
启动成功后,如下图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1cbc7119f7d540138cc8374dec10c667.png)

# 触发断点

调用接口,触发断点,如下图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/2c4ffd809241480d95834fa286c1e513.png)
相关推荐
hoLzwEge16 小时前
Volta实战:项目级Node版本管理 + 自定义安装目录
前端框架·node.js
laowang35719 小时前
依赖故障时,日志体系需要埋哪些关键节点才能快速定位是安装失败、解析失败还是运行时缺失?
前端·javascript·vue.js·webpack·node.js
不正经开发者1 天前
Node.js process
node.js
志尊宝1 天前
Vue3 环境搭建 + 第一个 HelloVue 项目(零基础入门)
vue.js·node.js·vue·css3
张一根2 天前
ESP32+Mqtt+Node.js+Vue3 做工控界面
node.js
星云_byto2 天前
五分钟从零配置好VSCode + Claude Code + DeepSeek V4 Pro
ide·vscode·编辑器·cursor·codex·claude code·deepseekv4
TE-茶叶蛋2 天前
Node.js-Phase 1 学习总结:CLI 文件管理系统
学习·node.js
前端之虎陈随易2 天前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·vue.js·人工智能·typescript·node.js
你家人养牛3 天前
OOC Relation Plugin:C 语言面向对象 开发的高效辅助工具
c语言·vscode
林熙蕾LXL3 天前
VSCode调试
ide·vscode·编辑器