VSCode 调试入门

Photo by NASA on Unsplash

VSCode 的 Debug 以配置文件的方式进行配置。对于新手可以说不太友好。但

是熟悉了之后会赞叹这种简洁的设计。本文的目的是介绍最基本的调试参数,

让初学者快速入门。

起步

当你打开 VSCode 中那个小虫子的图标,就可以选择默认的调试配置。此时,

你会得到一个名为 lauch.json 的配置文件。对于前端开发来说,Node 和

Chrome 调试环境的配置参数略有不同,我会分开进行解释。

Node 环境调试

type —— 调试环境类型

这里的 type 顾名思义是我们应用的类型。这里就是 node 啦。

request —— 调试方式

request 是这些参数中相对高级的一个… 它有两个属性 attach 和 launch。

attach 可以理解为附加到一个指定的进程上进行调试。在打开 Chrome 的开发

者工具时,调试程序会自动附着到当前的 tab ,这就 attach。而 lauch 却是直

接启动一个新的进程,然后再将调试程序附着到进程上。

name —— 调试配置名称

每个调试配置我们都可以给他一个名称,比如我有一个前后端分离的项目,那

么就可以把后端的调试名称改为 “Server” ,前端的改为”Client”,这样在调试

的时候就可以根据目标的不同,选择不同的配置,非常方便。

program —— 需要调试的目标文件

这个很好理解,指的是需要调试的 Node.js 文件。对于一些特殊的程序,比如

我们想调试 jest 的相关测试用例,这里就需要填写 jest 的实际路径。

args —— 调试命令行参数

对于命令行程序我们可能还需要用到 args 参数。它接受数组类型的参数,在这

里我可以指定我想传入的参数,用法如下。

args:["--year=2019"]

内置变量

VScode 内置了一些预先定义的变量,可以方便我们定义 lauch.json。比如,

${ workspaceFolder } 代表了 VSCode 打开的当前路径,${file} 代表了调试时

激活的文件。更多的解释可以参看官方文档的内置变量部分。

Chrome 环境

Chrome 环境下调试最大的不同在于所有的是由 Chrome 浏览器参与调试。

url

url 指定了 Chrome 启动时(launch 模式下),标签中打开的网址。若是

attach 模式,则浏览器调试器绑定到这个地址上。

webRoot

webRoot 指定了 Web 服务器根目录的绝对地址。这个配置有助于在调试中定

资源的位置

参考链接

Launch versus attach configurations

Variables Reference

Can someone explain webRoot config option in vscode?

发表评论

电子邮件地址不会被公开。 必填项已用*标注