VSCODE JS调试技巧 | Kitety别样

type

status

date

slug

summary

前言

我们在编码过程中，会经常遇到调试的场景。VSCODE 是我经常使用的编辑器，接下来我就将简单记录几种 VSCODE 调试的方式，如果想看完整的 VSCODE 调试内容请前往官方地址。

场景

单文件 JS 调试

直接调试

假如我有个单文件，我们在左侧可以打好断点，我们想直接调试，我们直接F5就会让选择调试环境，这里我们选择NODE环境就可以开始调试。

然后在左侧侧边栏可以查看运行变量，watch 值，调用栈，执行的脚本，断点信息等等；在底部的 debug console 也可以查看输出信息。

配置文件方式

对于一些项目文件，我们有固定的入口，我们可以将其写入配置文件，省去每次都打开指定文件和选择环境等操作。

选择 debug 侧边栏，点击create a launch.json file即可，生成文件的详细信息可以去官方文档指定章节查看。

简单的配置文件如下：

关于program这个字段，我们可以如下变量字段：

workspaceFolder 工作目录，可以自己拼接路径，默认寻找 index.*等文件

file 当前打开并且激活的文件

项目调试

上述为单文件，但是一些脚手架该怎么调试呢，比如webpack等。比如现在我有一个umi 的项目，我想调试 umi 的运行过程这要怎么做呢。

npm script 脚本方式

比如在项目中我们想使用umi dev进行开发，我们可以在 npm scripts 中添加命令：

而我们就可以利用这个脚本开始调试。

打断点

开始调试之前我们就需要先打好断点，我们在执行 npm 脚本的时候，先会查看当前目录的node_modules的 bin 中得命令（当前找不到会往上面找，直到全局），再找到对应的文件执行。我们就可以用这种方式去打断点。

launch.json

我们生成launch.json，点击添加配置，选择Launch via NPM就可以生成对应的配置，

点击生成模板代码，我们更改 runtimeArgs 第二个参数为定义在 scripts 中对应的脚本就可以了。

修改保存之后直接 F5 就可以运行并且进入断点了。

命令行方式

上述的方式也有一定的局限性，比如我们这个 umi 的例子，他会在运行的时候会产生子进程，这样我们无法断点调试子进程了，因此就有了命令行的方式。

–inspect-brk 详细

简单理解可以为审查断点，他会启用一个代理，默认为 9229 端口，也可以设置端口，他会在代码的开始位置进行断点。

设置脚本

修改 launhc.json

我们选择Attach to Remote Program

选择之后生成的字段比较多，我们保留nameportrequesttype

几个字段即可,其中 port 设置为脚本中设置的端口号。

开始调试

步骤如下：

yarn debug 开放监听端口

F5 启用调试进入断点

我们这次使用的是命令行的方式，umi 在开启子进程的时候也会暴露对应的端口以便调试。

执行结束之后，发现子进程已经开启了，我们就要连接到这个新开的 9230 子进程。

修改端口

我们此时点击调试栏的最右侧的断开连接，修改 launch.json 的 port 为新的端口号 9230，开启调试。

而此时，我们才算正式进入到了子进程的断点调试之中。

结语

以上，简单总结了使用 VSCODE 调试文件、项目方式，具体情况可以根据实际的环境来选择。