🚀你应该知道如何用VSCode进行Debugger
相信有很多小伙伴有都有使用过 Visual Studio Code ,它的确很不错,我从 Atom,Vim,NeoVim,一路辗转过来,确实还是挺好用的,开始有种想要慢慢脱离 Vim 模式的冲动。
如果你的 Web App
能够在 VSCode 中开始调试的话,应该能提高不少写 Bug 的效率吧~
here we go!🚀
ps:以下是基于 vscode
哟,如果你没有 vscode
,那么再见~
正文开始👉
下面我以我的项目代码为例,给大家粗浅的介绍一些 VSCode 的 Debugger 功能。
1. 首先打开 VSCode📌
- 进入你的项目目录中,并点击这个
debugger
图标,或者是ctrl + shift + d
,你也可以直接按F5
- 然后点击生成
launch.json
文件,
- 如果你是按的
F5
应该会直接弹出VSCode
的命令窗,直接选择下面这个,VSCode
会在项目根目录下创建一个 .vscode 的文件夹,并生成launch.json
文件
2. 确认端口号📌
在我们开始 debugger
之前,我们需要确认 launch.json
文件里的端口号是否是你本地开发的端口号
- 接下来就在本地跑起来你的项目,并打开你想要
Debugger
的 js 文件
3. 开始 Debug📌
在你的文件里面打上你的小红点,并且如果你鼠标右键单击的话,可以看到还有很多功能~
- 这里你还可以输入你的表达式,来设定条件断点
接下来就去触发你的函数,或者渲染方法吧
- 当执行到了我们设定的断点的时候,我们看下面这张图
左边有各种监控信息,比如:
- 变量
- 监视
- 调用堆栈(当你读框架源码的时候,非常有用)
- 已载入的脚本
- 断点信息
- 事件监听断点
几乎是和浏览器一模一样,浏览器有的,他都有~
F5
和 F10
应该都能看懂,
📌简单聊一下这俩吧:
- 假设这是你目前
Debug
停留的断点处是Function Two
,下图调用栈Call stack
的范围应该包括Function three
F11
: 会走到Function Three
,执行栈向下shift + F11
: 会走到Function One
,执行栈向上
当然了,如果向下或向上都没有了,自然就跳出了~
😊okk~ 赶紧去Debugger你的程序吧~