VSCode配置支持mocha調試

日常開發的時候,常常性須要對某個組件進行單元測試。而VSCode提供了調試的node程序的功能，就但願直接在源碼頁面上調試，這樣更加方便。

啓用調試

1. 點擊Debug的標籤，以下圖：

1. 在打開的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"
      }
    }
  ]
}

1. 在根目錄下建立 testHelper.js和registerBabel.js兩個文件：

testHelper.js:

require('./registerBabel');

registerBabel.js:

require('babel-core/register')({
  // babel options
  // ...
  // 在這裏能夠處理某些特殊的須要，好比對`node_moduels`下某個組件啓用babel解析等等
});

抽離這兩個文件是爲了讓正式程序也直接能夠調用registerBabel.js文件。

1. 固然要記得安裝babel-core

npm i babel-core -D

而後再你想打斷點的位置 打上斷點，點擊run 就能夠了、。

優化

不過在處理過程當中，發現斷點的地方每每與實際不相符，這是由於編譯後的源碼與實際源碼文件的行不一致形成的。只須要在.babelrc文件內加上一個屬性便可：

{
  "retainLines": true
}