如何调试由Chutzpah/PhantomJS执行的JavaScript代码

Question

我正在使用 Chutzpah 来执行我的 JavaScript 单元测试。

我引用了源文件的路径，并编写了一系列测试。在 Visual Studio 的测试资源管理器中，我可以看到我的测试，并直接从 IDE 中运行它们，所以一切似乎都正常工作。

然而，我想要进入被执行的源代码，以便查看。

这种操作可能吗？

- Greg

Answer 1

更新: Chutzpah 4.1.0 版本新增了集成的VS调试功能。

---

目前使用 Chutzpah 还无法实现此功能。最好的方法是安装 上下文菜单扩展，它将添加“在浏览器中打开”右键选项。然后您可以使用浏览器内置的调试工具逐步查看代码。

我很想添加一种集成方式来插入 VS 调试系统，但还没有想出如何做到这一点。

- Matthew Manela

---

这对我有用，使用Chrome。我设置了一个断点，然后进行了浏览器刷新。要直接调试TS（而不是生成的javascript），请在Chrome开发工具设置中打开“源映射”功能（位于右下角的齿轮图标）。 - John Hatton

自那时起，这种情况有所改变吗？您是否成功地集成到Visual Studio调试中了？ - julealgon

如果项目路径中有空格，例如“...\Visual Studio 2013\Project...”，则上下文菜单插件无法在浏览器中加载。 - Sean B

谢谢，我已经找到了这个 bug 并会在下一个版本中修复。 - Matthew Manela

Answer 2

也许这可以指引你朝着正确的方向：

我使用 captureBase64('png') 快速制作了一个 CasperJS 的截图工具。

它将图片 POST 到接收服务器，然后通过 socket.io 发送到浏览器，在浏览器中显示为内联图片。

源代码可在 Github 上获取：

https://github.com/maciejjankowski/flaming-octo-puss

我不确定它与PhantomJS的兼容性如何，但CasperJS可以完美地工作，所以如果chutzpah正在使用PhantomJS，你有机会使这个概念起作用。

您需要将此添加到每个步骤或将其设置为onStepComplete处理程序：

this.evaluate( function(img){
  __utils__.sendAJAX("http://localhost:8001/", 'POST', {'img' : img }, false);    
  }, 
  {'img' : this.captureBase64('png')} 
);

- Maciej Jankowski