vscode debug

1、为什么需要调试

写了很多行代码,但是有时候运行的时候遇到了未知的错误,不知道错在哪,有时候错误是某个参数未定义,path找不到等等,这个时候我们就怀疑是值未传递到设置好的参数内,所以可以使用输出语句,但是懂调试的话是写程序的一大利器,且效率极高。

还有就是console.log这种语句写够了!

最近一直用vscode写后端和前端,一直在接触nodejs语言,但是一直都不怎么了解vscode的调试,所以决心来学习一下。

2、vscode如何调试

VScode除了支持JavaScript和TypeScript,还支持Node.js调试,简直就是为前端工程师而生的。

2.1. 先下载一下express模板项目
  1. npm install express-generator -g
  2. express -v 查看版本
  3. express myapp
  4. cd myapp && npm install
  5. npm start
2.2 启动程序后进入vscode主界面
  1. F5选择nodejs环境,会生成launch.json配置文件

https://tva1.sinaimg.cn/large/006y8mN6ly1g73r2l1khhj312r0j7mzt.jpg

其中最重要的配置项就是“Program”字段,这个字段定义了整个应用的入口,开启调试器的时候会从这个入口启动应用。

查看package.json中是否有包含了键名为startscripts,如果有的话,就会把start配置的内容作为“program”字段的值。

  1. 点击绿色三角形,就可以开始调试。

这时界面上方就会出现一个调试控制的面板,页面右下方会出现一个调试控制台,可以查看你输出的信息,在界面下放会出现一个状态栏,当前的橘黄色表示应用在正常运行

https://tva1.sinaimg.cn/large/006y8mN6ly1g73r5owvr2j30v3075dgu.jpg

  1. 设置断点

设置完断点之后,重新启动调试,然后在浏览器中访问localhost:3000,这时候,断点的形状发生了变化,程序停留在了断点,调试控制面板的按钮也发生了变化

https://tva1.sinaimg.cn/large/006y8mN6ly1g73rb2ffgmj30yj0e4tat.jpg

从左到右依次是

单步跳过

单步调试

单步跳出

重启

停止调试

这几个都是常见的断点调试指令。

https://tva1.sinaimg.cn/large/006y8mN6ly1g73re1ak3cj31n40epad3.jpg

2.3 调式技巧
  1. 将鼠标防止在断点前的变量或者参数上,也可以查看该变量当前的数值,体验与Chrome开发者工具的调试一致。

https://tva1.sinaimg.cn/large/006y8mN6ly1g73rg7aib3j318k0n278q.jpg

Contents
  1. 1. 1、为什么需要调试
  2. 2. 2、vscode如何调试
    1. 2.1. 2.1. 先下载一下express模板项目
    2. 2.2. 2.2 启动程序后进入vscode主界面
    3. 2.3. 2.3 调式技巧