共计 872 个字符，预计需要花费 3 分钟才能阅读完成。
平常开发的时候, 经常性需要对某个组件进行单元测试。而 VSCode 提供了调试的 node 程序的功能，就希望直接在源码页面上调试，这样更加方便。
启用调试
点击 Debug 的标签，如下图：
在打开的 lanuch.json 文件复制以下内容：
{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Run mocha”,
“type”: “node”,
“request”: “launch”,
“program”: “${workspaceRoot}/node_modules/mocha/bin/_mocha”,
“stopOnEntry”: false,
“args”: [
“–no-timeouts”,
“–require”,
“./testHelper.js”,
“–compilers”,
“js:babel-core/register”,
“–recursive”
],
“cwd”: “${workspaceRoot}/”,
“runtimeExecutable”: null,
“env”: {
“NODE_ENV”: “testing”
}
}
]
}
在根目錄下创建 testHelper.js 和 registerBabel.js 两个文件：
testHelper.js:
require(‘./registerBabel’);
registerBabel.js:
require(‘babel-core/register’)({
// babel options
// …
// 在这里可以处理某些特殊的需要，比如对 `node_moduels` 下某个组件启用 babel 解析等等
});
抽离这两个文件是为了让正式程序也直接可以调用 registerBabel.js 文件。
当然要记得安装 babel-core
npm i babel-core -D
然后再你想打断点的位置 打上断点，点击 run 就可以了、。
优化
不过在处理过程中，发现断点的地方往往与实际不相符，这是因为编译后的源码与实际源码文件的行不一致造成的。只需要在.babelrc 文件内加上一个属性即可：
{
“retainLines”: true
}
