在Visual studio Code 中调试 Vue 的Unit Test的一个示例wanzcong的博客-

有一个基于vue 2.6 , vue-cli 3.0 的项目，那么在项目中写unit test的时候，如何使用 vs code进行调试呢？

参考外网链接

首先，vs code debug unit test 是不需要安装任何的外部插件的，在左边有一个播放按钮被小虫子压住左下角的那个图标，就是debug图标，点击就可以进入debug界面。
默认是这个样子的，点击 create a launch.json, 创建一个配置文件

这是我的配置文件内容, 完整复制，替换刚刚创建的launch.json全部内容。
注意 configurations下面runtimeArgs字段，vue-cli-service.js 的地址要使用绝对路径，由于我是在mac电脑上配置的，Windows下情多尝试一下路径格式。

{ // 使用 IntelliSense 了解相关属性。  // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "vscode-unit-tests for vue", "type": "node", "request": "launch", "runtimeArgs": [ "--inspect-brk", "绝对路径到vue-cli-service/vue-cli-service.js", "test:unit", "${file}", "--runInBand" ], "cwd": "${workspaceFolder}", "protocol": "inspector", "disableOptimisticBPs": true, "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "outFiles": [ "${workspaceFolder}/src/**/*.js"], "port": 9229 }, ] } 

其他参数要参考package.json里面的配置，比如我项目内的配置

 "test:unit": "vue-cli-service test:unit --coverage", 

runtimeArgs 如果不配置 ${file}, 那么每次点击按钮会将项目内全部测试跑完
以前跑unit test需要在终端里面敲命令

yarn unit:test 

或者

npm run test:unit filepath 

配置好之后，在vs code内打开一个测试文件，点击图中红框中的部分，就会开始测试当前打开的文件。如果运行到断点，就会出现一组类似chrome debug的图标