使用 WebStorm 调试量角器答案

【问题标题】：Debugging protractor using WebStorm使用 WebStorm 调试量角器
【发布时间】：2016-07-12 05:55:31
【问题描述】：

我正在尝试使用 WebStorm 来调试量角器 e2e 测试，我的目标是能够在测试代码中放置断点。我是新手，所以我可能做错了什么。

如the protractor tutorial 所述，我更新了 webdriver-manager 并在 cmd 终端中使用此命令启动它（我在 Windows 上工作）：

webdriver-manager start

这是我的 protractor-conf.js 文件：

var ScreenshotReporter = require('./screenshotReporter.js');

exports.config = {
  // The address of a running selenium server.
  seleniumAddress: 'http://localhost:4444/wd/hub',

  //baseUrl: 'http://localhost:9000',

  framework: 'jasmine2',

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome'
  },

  specs: ['**/*_spec.js'],

  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  },

  onPrepare: function() {
    jasmine.getEnv().addReporter(new ScreenshotReporter("test-e2e/screenshotFailures/"));
  }
};

我在 WebStorm 中创建了这样的配置：

节点解释器： C:\Program Files\nodejs\node.exe

工作目录： C:*******\ref-app

Javascript 文件： node_modules\protractor\lib\cli.js

应用参数： test-e2e/protractor-conf.js

在我尝试了几件事之后：

使用 WebStorm 中的运行按钮运行 Protactor：失败：在页面上找不到 Angular / ：重试寻找超过的角度
使用 WebStorm 中的调试按钮调试量角器：我可以在 WebStorm 控制台中看到这一点，但之后没有任何反应：
```
Using the selenium server at http://localhost:4444/wd/hub
[launcher] Running 1 instances of WebDriver
Started
F
```
修改protractor-conf.js 添加baseUrl
```
baseUrl: 'http://localhost:9000',
```
然后在端口 9000 上启动本地网络服务器
如果我在 WebStorm 中使用运行按钮运行量角器，它工作正常，但我无法设置断点
如果我在 WebStorm 中使用调试按钮调试 Prtoractor，我可以在控制台中看到这一点，但之后没有任何反应：
```
Using the selenium server at http://localhost:4444/wd/hub
[launcher] Running 1 instances of WebDriver
Started
```

编辑： 正如我在下面的评论中所说，我正在使用：量角器 3.1.0 WebStorm 11.0.3

当我尝试使用 webstorm 进行调试时，它会打开一个 Chrome 窗口，但屏幕完全是空白的，并且在 URL 中，您有：data:,（我不认为它是有用，但我不知道该尝试什么）

知道我做错了什么吗？

【问题讨论】：

你可以使用 browser.pause() 见angular.github.io/protractor/#/…
我使用 browser.pause() 并且它正在工作，但是能够使用适当的 IDE 进行调试似乎比命令行调试要好得多
绝对可以使用 webstorm 设置断点。 angular.github.io/protractor/#/… 或许可以尝试升级node、npm，将你的protractor 依赖更新到3+，删除你的node_modules 文件夹，运行npm update 得到一个干净的文件夹，然后再次尝试通过webstorm 调试。
我更新到 Protractor 3.1.0，将 webstorm 更新到最新版本，删除 node_modules 并重新安装，它没有工作...
你尝试过这个教程吗：angularjshowtos.blogspot.ca/2014/10/… 我确实按照步骤进行操作，断点对我来说效果很好

标签： angularjs debugging protractor webstorm breakpoints

【解决方案1】：

您可以在--inspect-brk 模式下运行node，并附加一个远程调试器，例如chrome dev-tools：

使用ng serve 启动您的应用并运行

node --inspect-brk ./node_modules/protractor/bin/protractor ./protractor.conf.js

现在节点等待调试器附加。

然后你可以打开chrome://inspect/#devices。您的应用程序应该出现在那里。最后在目标/您的应用程序上单击检查，瞧，您现在可以使用断点和debugger; 语句。

【讨论】：