如何在Angular 6中设置VSCode调试器以与Protractor E2E测试一起使用

Question

我在想什么

我正在尝试通过我的量角器E2E测试使VSCode调试器工作断点。

我已经搜索了Google，Stack Overflow，GitHub，但没有找到有效的方法。我认为这将是一个易于实现的常见情况，因为创建Angular应用程序的默认工作流程是：

• 使用VSCode
• 使用TS
• 使用量角器进行E2E测试（量角器默认情况下已添加到新应用中）。

我目前有什么

这是一个刚刚创建的Angular 6应用程序，我没有添加任何其他内容。

我有两种启动配置，一种用于单元/组件测试，另一种用于正常使用。

对于单元和组件测试，我有一个启动配置，用于附加到正在运行的业力会话。

对于常规调试，我具有用于启动chrome会话的启动配置。

问题

我的问题是量角器e2e测试。 如果我运行npm run e2e，则服务器将启动并运行测试，但没有命中任何断点。

我最近得到的是使用npm run start启动该应用程序。 然后运行此启动配置：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}\\node_modules\\protractor\\bin\\protractor",
            "args": [
                "${workspaceRoot}/e2e/protractor.conf.js"
            ]
        }
    ]
}

我的断点被击中，但是没有加载UI。 如果我从断点继续执行，UI将被加载并测试通过。

理想场景

理想情况是：

• 启动应用服务器的启动配置
• 推出Chrome
• 加载用户界面
• 在测试的断点处停止