NG测试中的调试测试

我正在使用Angular CLI和VS代码,但是当我运行测试时,我的spec文件中的所有断点似乎都没有受到影响？

我需要做一些配置吗？

其他答案是完全有效的答案,但现在已经使用Angular大约18个月了,我倾向于在浏览器中使用它 - chrome工具!

运行ng测试然后f12并通过webpack上下文找到spec文件.添加断点并刷新,它将触发所述断点.截至截图

这对我使用Angular CLI 1.0.*和Windows 7上的Chrome有用.

更改配置文件

在你的项目根目录中打开_karma_webpack_.在pathMapping添加.vscode/launch.json后跟随此部分:

    {
      "type": "chrome",
      "request": "attach",
      "name": "Unit tests",
      "address": "localhost",
      "port": 9333,
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}"
      }
    },

添加配置到karma.conf.js:

    customLaunchers: {
      ChromeDebug: {
        base: 'Chrome',
        flags: [ '--remote-debugging-port=9333' ]
      }
    }

开始调试

跑 singleRun: false

等待Chrome浏览器启动.您将在命令行中看到类似的内容:

    {
      "type": "chrome",
      "request": "attach",
      "name": "Unit tests",
      "address": "localhost",
      "port": 9333,
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}"
    },

在其中一个,文件中设置断点.

在Visual Studio Code中选择.vscode/launch.jsondebug configuration并按F5("Start Debugging"按钮).

按ng test --browsers ChromeDebug或刷新Chrome窗口以重新运行测试并点击断点.

为了方便

您还可以修改package.json并添加新脚本:

01 06 2017 16:07:29.276:INFO [launcher]: Launching browser ChromeDebug with unlimited concurrency

然后下次你想开始.spec.ts调试就运行:

"test-debug": "ng test --browsers ChromeDebug",

参考文献:

调试在VS Code中使用Karma runner运行的Jasmine Unit测试

使用VSCode调试Karma测试

在VSCode(1.14.0)的新版本中,他们遵循以下配方:

您可以完全调试Angular App(包括单元测试),配方很简单.