系列
Visual Studio Code使用教程
在VS Code里调试代码
调试代码,是程序员的一项重要的技能。而一个好的开发工具,则可以让这个技能轻松掌握。
按照上图中左侧的“虫子”图标,就会出现上图中的内容。为了介绍的需要,我们在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
并保存之后,可以点左上角红圈中的三角图标启动程序进行调试,跟上面的调试功能是完全一样的。