[原创]VSCode debug jest的配置

时间:2024-06-20 16:08:02

重拾JS的路从修改JS源码开始,修改JS源码从源码自带的test code开始。源码的test code使用了jtest框架,从test code刚好可以看到要修改部分的 多种传值方式,以及函数输出结构。修改源码后,顺便修改jtest的snapshot, 刚好又可以重新利用test code,进行验证自己的修改是否达到预期,白盒测试十分轻巧方便!

第一步,debug jest code, 我使用了VSCode做编辑器,要修改的js源码比较复杂,有多个工程,每个工程有自己的package.json, babelrc, yarn.lock,总之包管理很复杂。。我修改的部分只是其中一个工程,主要是debug这个工程下的jest文件。用习惯了ideal里本地debug Java的方式,希望在VSCode里也能这样去debug。(不是专业前端开始,在浏览器里进行大型debug用着不顺手)。

  要能debug, 主要需要在VSCode里创建launch.json文件,方法如下:(截图来自VSCode官网)在VSCode里打开工程目录,选择左侧工具栏的debug图标,然后在debug面板上选择小齿轮图标。

[原创]VSCode debug jest的配置

VSCode会自动探测你的debug环境,如果探测失败的话,需要手工选择。

[原创]VSCode debug jest的配置

至此,在你的工程目录下,就会自动生成launch.json文件,位于.vscode文件夹下,因为我们要调试jest文件,所以launch.json中的内容需要修改为jest的,(参考jest官网给的配置),下面是我的launch.json。

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Debug Jest Tests",
"type": "node",
"request": "launch",
"runtimeArgs": [
"--inspect-brk",
"${workspaceRoot}/node_modules/jest/bin/jest.js",
"--runInBand"
],
//"sourceMaps": true,
"trace": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"port": 9229
}
]
}
到此,就可以在VSCode里debug jest了,选择你要debug的jest文件,右键选择debug jest即可。

参考链接:

https://code.visualstudio.com/docs/editor/debugging

https://jestjs.io/docs/en/troubleshooting.html#debugging-in-vs-code

https://blog.****.net/qq_17371033/article/details/79503136