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

时间:2024-06-20 15:33:02

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

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

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

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

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

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

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

  1. 设置断点

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

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

从左到右依次是

单步跳过

单步调试

单步跳出

重启

停止调试

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

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

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

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