在VS Code里调试代码

2020-01-18大约9分钟

调试代码,是程序员的一项重要的技能。而一个好的开发工具,则可以让这个技能轻松掌握。

图片

按照上图中左侧的“虫子”图标,就会出现上图中的内容。为了介绍的需要,我们在demo目录下创建了一个一个叫做index.js的文件,并写了两行简单代码。看起来如上图所示。

上图红色边框内,可以选择具体的行来进行断点。但如何启动调试(Debug)呢?默认情况下,这个项目如果没有配置过launch.json文件的话,那么就会出现左侧的窗口。因为我写的是JS代码,是可以用Node.js来调试的,因此,可以选“使用Node.js进行调试 ”,或者可以选下面的“创建launch.json文件 ”。

使用Node.js进行调试

我们先试试“使用Node.js进行调试 ”,点了按钮之后,代码开始执行,并执行到第二行标记为断点的地方暂停:

图片

可以在左边的变量区域看到程序内部的变量信息。我们代码中定义了一个变量a,因此可以看到a此时的值。同时,还显示出了两个内置的变量__dirname__filename

如果程序中的变量比较多,或者就可以用监视等功能。我们把程序修改得更复杂一些,如下如所示:

图片

我们点+按钮,之后输入表达式person.pets[1].name,重新开始调试,当程序进入断点的时候,我们就看到这个表达式的值是dog,这对于调试复杂的程序里尤其有用,可以简化不少信息。

在上图中,不仅仅是监视功能,我们还可以看到调用堆栈 部分,显示我们程序现在正在sayHello函数里面,对调用层次深的程序也很有用。断点 部分,当源代码文件多的时候,可以不用切换文件就可以取消/启用断点,方便调试。

创建launch.json文件

如果选择这个,则VSCode会自动帮我们创建这个文件,并填上初始化的内容。

图片

如果你调试的是Node.js代码,那么通常保证program部分的文件是你的程序的入口即可。如果是其他语言,需要调整type部分,具体可以参考相应语言的扩展。

修改launch.json并保存之后,可以点左上角红圈中的三角图标启动程序进行调试,跟上面的调试功能是完全一样的。