Visual studio 如何在VisualStudio代码中调试Karma测试？

我想在VS代码中调试Karma测试，但我没有找到如何调试的方法。有没有办法做到这一点，或者我必须使用另一个IDE（WebStorm）？

试试看

{
“名字”：“茉莉花”，
“类型”：“节点”，
“请求”：“启动”，
“程序”：“${workspaceRoot}/node_modules/jasmine/bin/jasmine.js”，
“stopOnEntry”：false，
“args”：[
“JASMINE_CONFIG_PATH=${workspaceRoot}/spec/support/JASMINE.json”
],
“cwd”：“${workspaceRoot}”，
“runtimeArgs”：[
“诺拉齐”
],
“环境”：{
“节点环境”：“开发”
}
}

您可以通过将调试器附加到Chrome实例来调试Karma。您需要将

launch.json

config设置为如下内容：

{
“版本”：“0.2.0”，
“配置”：[
{
“类型”：“铬”，
“请求”：“附上”，
“姓名”：“附加业力铬”，
“地址”：“本地主机”，
“港口”：9333，
“路径映射”：{
“/”：“${workspaceRoot}/”，
“/base/”：“${workspaceRoot}/”
}
}
]
}

但是你也需要调整你的

karma.conf.js配置

，这样它就可以启动Chrome实例，而开发工具会监听

9333

端口，如下所示：

浏览器：[
“窃听”
],
自定义启动器：{
镀铬窃听：{
基地：'铬'，
标志：['--远程调试端口=9333']
}
},

使用这种设置，您只需运行karma服务器（使用捕获的浏览器），然后在visual studio中开始调试

---

如果您想了解更多详细信息，请参阅我的教程。

这里有一个更简单的配置（在

launch.json

中）：

重要提示：

• 将

  webRoot

  更改为Karma为您的测试提供服务的文件夹
• 这假设Karma正在端口9876上运行。如果不是，请相应地更改

  url

此配置更简单，原因如下：

• 您不需要记住在Karma的UI中点击Debug按钮，或者在附加调试器后刷新页面
• 你不需要在你的Karma配置中添加自定义启动器。您只需要确保您有

  singleRun:false

  。您甚至可以设置

  浏览器：[]

  ，因为VS-code将启动自己的浏览器（在无头模式下，所以您不会看到它）
• 我在headless模式下运行，因为您不再需要查看浏览器，因为您可以在VS代码中进行调试
• 请注意，在启动调试器之前，您仍然需要启动Karma。您可以通过添加自动启动Karma的

  preLaunchTask

  来改进此配置。您需要将其配置为

---

使用Angular CLI 1.7.4：通过以下步骤，我能够使用Visual Studio代码调试hello world Angular应用程序：

生成新的HelloWorld项目：

ng新HelloWorld

在Visual Studio代码中打开项目

code HelloWorld

创建新的调试配置：

生成并打开一个

.vscode/launch.json

文件。将其内容替换为以下内容：

{
//使用IntelliSense了解可能的属性。
//悬停以查看现有属性的描述。
//有关更多信息，请访问：https://go.microsoft.com/fwlink/?linkid=830387
“版本”：“0.2.0”，
“配置”：[
{
“类型”：“铬”，
“请求”：“启动”，
“名称”：“业力测试”，
“源地图”：正确，
“webRoot”：“${workspaceRoot}”，
“url”：”http://localhost:9876/debug.html",
//“runtimeArgs”：[
//“无头”
// ],
“路径映射”：{
“/”：“${workspaceRoot}”，
“/base/”：“${workspaceRoot}/”
},
“sourceMapPathOverrides”：{
"webpack:///./*“：“${webRoot}/*”，
"webpack:///src/*“：“${webRoot}/*”，
“网页包：//*”：“*”，
"webpack:///./~/*“：“${webRoot}/node\u modules/*”，
“meteor://我遵循了@Awsed极好的解释[谢谢！]，并且能够让事情顺利进行，但有几个值得注意的注意事项：

VSCode中似乎存在跟踪规范文件中的断点行时遇到问题的错误。即使在正确的设置之后，我也没有命中断点，因为VSCode似乎对断点所在的行感到困惑，尤其是在更改任何代码时。我找不到解决此问题的方法（即使在两次重新启动并多次重新启动VSCode之后）。我只能通过转到一个在一段时间内没有更改的测试文件来发现这一点，并且能够成功地命中断点。因此，我将断点移动到我遇到问题的文件页面中的不同位置，并能够找到它（最终）命中断点的位置

此外，我不建议运行Chrome headless，因为“停止”按钮不会终止进程，而且您在task manager中找不到它，因为它是无头的--您必须使用命令来终止它（例如）；如果您不这样做，您将无法再次运行它。
对于来到这里寻找角度调试karma测试的任何人，请参阅microsoft提供的。
我使用的是
angular/cli:“^8.3.25”
和
karma:“1.3.0”“
，
chrome79
，
VSCode 1.43.2
和VSCode扩展
在windows10上的chrome4.12.6
调试器

以前我们不需要调试那些karma单元测试。使用
karma.config.js
中的以下设置。运行
ng test--watch=true
就可以了

端口：9876，
颜色：对，
洛格列夫
{
    "type": "chrome",
    "request": "launch",
    "name": "Test",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}/Test",
    "url": "http://localhost:9876/debug.html",
    "runtimeArgs": [
        "--headless"
    ]
}