Debugging Sinon.js in some smart way - sinon

Question

We're using Sinon.JS for some integration-ish testing and I'm having a problem I need to debug somehow. We're using the fakeServer.create() method like so:
server = Sinon.fakeServer.create()
server.autoRespond = true
server.respondWith "GET", ...
Normally when working with xhr, you just open the network-tab in chrome dev tools and you can see all calls to the server, the order of them and the responses from the server. This is super helpful for debugging. Can I achieve something similar when working with Sinon?

Answer 1

If you are using karma-runner in a browser such as Google Chrome, you can use the "debug" feature. The general idea is starting the karma test with runonce disabled, and then clicking the debug button on the browser window that pops up. You can set breakpoints and debug the tests in a web browser like you normally would, including opening up the network tab in chrome.

Answer 2

The documentation in this area is a little sparse, but one of the configuration options for Sinon's createFakeServer() is logger, here's an example of how you might use it:
var server = sinon.createFakeServer({ logger: console.log });
This will produce:
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)]

Answer 3

Adding some more details to #dustinroepsch answer.
Start Karma with these options
karma start karma.conf.js --browsers=Chrome --single-run=false --debug
This will open up a Google Chrome instance that does not get closed once test completes. You should be able to view both the source and test files in Developer Tools -> Source. You can then place breakpoints and reload the page to debug.