以某种智能方式调试 Sinon.js答案

【问题标题】：Debugging Sinon.js in some smart way以某种智能方式调试 Sinon.js
【发布时间】：2014-05-26 07:53:17
【问题描述】：

我们正在使用Sinon.JS 进行一些集成式测试，但我遇到了一个需要以某种方式进行调试的问题。我们正在使用fakeServer.create() 方法，如下所示：

server = Sinon.fakeServer.create()
server.autoRespond = true
server.respondWith "GET", ...

通常在使用 xhr 时，您只需在 chrome 开发工具中打开网络选项卡，您就可以看到对服务器的所有调用、它们的顺序以及来自服务器的响应。这对调试非常有帮助。与诗乃合作时，我可以实现类似的目标吗？

【问题讨论】：

标签： sinon

【解决方案1】：

如果您在 Google Chrome 等浏览器中使用 karma-runner，则可以使用“调试”功能。总体思路是在禁用 runonce 的情况下启动 karma 测试，然后单击弹出的浏览器窗口上的调试按钮。您可以像往常一样在 Web 浏览器中设置断点和调试测试，包括在 chrome 中打开网络选项卡。

【讨论】：

【解决方案2】：

这方面的文档有点稀疏，但是Sinon的createFakeServer()的配置选项之一是logger，下面是一个你可能如何使用它的例子：

var server = sinon.createFakeServer({ logger: console.log });

这将产生：

Request:
  [FakeXMLHttpRequest] {
  async: true,
    errorFlag: false,
    eventListeners: {
    abort: [function () {}],
      error: [function () {}],
      load: [function () {}],
      loadend: [function () {}],
      loadstart: [function () {}],
      progress: [function () {}],
      timeout: [function () {}]
  },
  logError: function logError() {},
  method: "GET",
    onSend: function () {},
  onerror: function () {},
  onload: function () {},
  onreadystatechange: function () {},
  password: undefined,
    readyState: 1,
    requestBody: null,
    requestHeaders: {
    Accept: "application/json, text/javascript, */*; q=0.01",
    Content-Type: "text/plain;charset=utf-8",
    X-Requested-With: "XMLHttpRequest",
      twProjectsVer: "2.0"
  },
  response: (empty string),
  responseText: (empty string),
  responseType: (empty string),
  responseXML: null,
    sendFlag: true,
    status: 0,
    statusText: (empty string),
  timeout: 0,
    unsafeHeadersEnabled: function () {},
  upload: {
    eventListeners: {
      abort: [function () {}],
        error: [function () {}],
        load: [function () {}],
        loadend: [function () {}],
        loadstart: [function () {}],
        progress: [function () {}],
        timeout: [function () {}]
    }
  },
  url: "/entities.json?page=1&pageSize=50&offsetCount=0",
    username: undefined,
    withCredentials: false
}

Response:
  [404, {  }, (empty string)]

【讨论】：

【解决方案3】：

在@dustinroepsch 答案中添加更多细节。使用这些选项启动 Karma

karma start karma.conf.js --browsers=Chrome --single-run=false --debug

这将打开一个在测试完成后不会关闭的 Google Chrome 实例。您应该能够在 Developer Tools -> Source 中查看源文件和测试文件。然后，您可以放置断点并重新加载页面以进行调试。

【讨论】：