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模板项目
npm install express-generator -g-
express -v查看版本 express myappcd myapp && npm installnpm start
2.2 启动程序后进入vscode主界面
- F5选择nodejs环境，会生成launch.json配置文件
其中最重要的配置项就是“Program”字段，这个字段定义了整个应用的入口，开启调试器的时候会从这个入口启动应用。
查看package.json中是否有包含了键名为start的scripts，如果有的话，就会把start配置的内容作为“program”字段的值。
- 点击绿色三角形，就可以开始调试。
这时界面上方就会出现一个调试控制的面板，页面右下方会出现一个调试控制台，可以查看你输出的信息，在界面下放会出现一个状态栏，当前的橘黄色表示应用在正常运行
- 设置断点
设置完断点之后，重新启动调试，然后在浏览器中访问localhost:3000，这时候，断点的形状发生了变化，程序停留在了断点，调试控制面板的按钮也发生了变化
从左到右依次是
单步跳过
单步调试
单步跳出
重启
停止调试
这几个都是常见的断点调试指令。
2.3 调式技巧
- 将鼠标防止在断点前的变量或者参数上，也可以查看该变量当前的数值，体验与Chrome开发者工具的调试一致。
