VSCode配置支持mocha调试

el09xccxy 发布于2019-08-26 13:39 / 1091人阅读

摘要：平常开发的时候经常性需要对某个组件进行单元测试。而提供了调试的程序的功能，就希望直接在源码页面上调试，这样更加方便。优化不过在处理过程中，发现断点的地方往往与实际不相符，这是因为编译后的源码与实际源码文件的行不一致造成的。

平常开发的时候,经常性需要对某个组件进行单元测试。而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 云服务器网络调试助手配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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