vscode 开发调试断点配置 launch.json

前提

对于开发者来讲,怎么科学合理的进行程序调试是至关重要的。调试工具可以协助开发者清晰的看到程序的走向以及程序每一步执行的详细信息。

开发前端项目,比如 React,vue等,开发者可以直接在代码中插入 debugger 进行调试。

Node 程序调试,我们可以借助开发工具 vscode 提供的能力进行操作。

调试配置

  1. 选择调试选项,create a lunch.json file

image-20210203104215522

  1. 选择需要调试的环境,以 Node 程序调试

image-20210203104109965

系统生成最基础的模版信息

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program", //调试程序名称,方便开发者区分
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/index.js" // 调试程序入口
        }
    ]
}

根据 program 参数可以看出,默认是以跟路径下 index.js作为入口执行调试。启动方式类似于直接控制台 node index.js,但是有时候我们碰到使用必须使用 npm 启动的程序,比如使用 eggjs nest 这些框架时,入口 js 是被隐藏的,都是通过框架提供的 bin命令启动的。

  1. npm 启动调试

vscode 直接提供可视化操作让我们继续追加 configuration 配置信息。

image-20210203105609983

vscode 提供了很多configuration 配置模版,因为此处需要调试 npm 脚本,所以选择下图选项。

提供的模块大家感兴趣可以都自己尝试下,毕竟纸上得来终觉浅

image-20210203105757960

{
  "version": "0.2.0",
  "configurations": [
  // npm 调试配置
    {
      "command": "npm dev",
      "name": "NPM 调试",
      "request": "launch",
      "type": "node-terminal"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "JS文件调试", //调试程序名称,方便开发者区分
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/app.js" // 调试程序入口
    }
  ]
}

  1. 选择调试配置

image-20210203110922779

  1. 调试快捷键 F5
  2. 同时启动多个调试进程
// launch.json 

 "compounds": [
    {
      "name": "同时调试",
      "configurations": ["NPM 调试", "JS文件调试"],
    }
  ]

调试控制

image-20210203112025795

按钮功能说明从左到右依次说明

  • Continue 直接跳过当前断点到下一个断电或者直接结束断点

  • Step Over 单步执行时,遇到子函数时不会进行子函数内执行,而是执行完整个子函数

  • Step Into 单步执行时,遇到子函数会进入内部并且继续单步执行

  • Step Out 单步执行进入子函数内部时, 可以执行完子函数余下部分,并且返回上一层函数调用处

  • Restart 重新执行

  • Stop 关闭

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

乐闻x

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值