VSCode配置支持mocha調試

el09xccxy 發布于2019-08-26 13:39 / 1085人閱讀

摘要：平常開發的時候經常性需要對某個組件進行單元測試。而提供了調試的程序的功能，就希望直接在源碼頁面上調試，這樣更加方便。優化不過在處理過程中，發現斷點的地方往往與實際不相符，這是因為編譯后的源碼與實際源碼文件的行不一致造成的。

平常開發的時候,經常性需要對某個組件進行單元測試。而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
}

GPU云服務器云服務器 asp不支持本地調試調試配置 mocha 云服務器網絡調試助手配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109235.html

用webpack寫個現代的JavaScript包

摘要：這里我們可以嘗試運行一下命令嘗試能否構建成功，成功的情況下在目錄下會生成的文件。在添加調試代碼打開調試面板在下拉選項中選擇添加配置或者直接創建并打開文件使用了解相關屬性。 webpack 作為目前主流的構建工具，其較快的版本迭代和復雜的配置方式，使得每次開發前不得不規劃相當部分時間來調試。這里將記錄整個環境的搭建過程，為新手提供基礎思路。就像我在開發vue-sitemap時一樣，構建...

yhaolpz 2019-08-23 13:42 評論0 收藏0
如何在VScode 中調試 ts 文件 Unit test

摘要：最近在使用調試寫的遇到一個問題，文件中了某個寫的文件代碼，跑的時候回報錯說無法找到。解決方式是在參數中加入最近在使用VScode 調試 mocha 寫的 UT, 遇到一個問題，executor.js文件中require了某個ts寫的文件代碼，跑ut的時候回報錯說無法找到。解決方式是在參數中加入 -r,ts-node/register { type: ...

songze 2019-08-23 13:55 評論0 收藏0
你不知道的前端SDK開發技巧

摘要：一個帶提示的最后對于開發同學來說，就算不使用，也強烈建議使用提供注解，它會通過一些類型推導來檢查你的代碼的正確性，可以減少很多開發過程中的。相對于對象，它保證了輸入的類型你定義的對象可能某一天不再只有類型的，不再需要額外的類型判斷。作者：陳達孚香港中文大學研究生,《移動Web前端高效開發實戰》作者之一，《前端開發者指南2017》譯者之一，在中國前端開發者大會,中生代技術大會等技術...

jokester 2019-08-21 17:56 評論0 收藏0
VS Code插件開發指南(view-readme)

摘要：本次給大家帶來的分享是關于插件的一些經驗，分享的內容是我寫的一個插件。為了解決上面這個問題，我開發了這個插件。本次給大家帶來的分享是關于VS Code插件的一些經驗，分享的內容是我寫的一個插件：view-readme。開發背景在本地安裝好所有npm包后，有的時候想看看某個模塊的文檔，了解其特性以及如何使用。于是打開node_modules文件夾，大家都知道，這個文件夾里面的文件是...

yy736044583 2019-08-21 15:32 評論0 收藏0
前端開發VScode常用插件

摘要：名稱功能自動閉合標簽自動提示修改標簽時，自動修改匹配的標簽格式化編寫更加人性化的注釋添加行書簽的瀏覽器兼容性檢查運行選中代碼段支持大量語言，包括單詞拼寫檢查在中彈出瀏覽器并搜索，可編輯搜索引擎顏色值在代碼中高亮顯示小窗口顯示顏色值，等等拾色名稱功能 Auto Close Tag 自動閉合HTML標簽 Auto Import...

hellowoody 2019-08-21 18:21 評論0 收藏0