10.VScode Debug——2019年12月12日

---

title: vscode debug
date: "2019-09-17 16:17:16"
tags: 技巧
categories: 技术驿站

---

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配置文件

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

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

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

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

1. 设置断点

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

从左到右依次是

单步跳过

单步调试

单步跳出

重启

停止调试

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

2.3 调式技巧

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