How can I set breakpoints in my qunit tests when using the Resharper test runner

Question

It's a great thing that with Resharper 6 one can write qunit tests and run those with the integrated resharper test runner. However, I wonder if it is possible to set breakpoints in the tests and the code under test. The problem is, each time it opens the browser it uses a different randomized port number which means you can not just set breakpoints in the browser and rerun the tests by hitting F5. So I wonder, is it even possible somehow?

Grab

See my answer below about using the debugger statement with Firefox+Firebug. – Tiana

Answer 1

Unfortunately, it is not possible at the moment - see this request. What I suggest you do right now if you need debugging is to use QUnit canonically - create an HTML page, drop your JS libs, tests and QUnit into them, and put in the QUnit HTML elements to display the results. This way, you'll be able to set breakpoints in JS.

Marbleize

Ah, I didn't find this issue myself. However, I upvoted it now that I know it exists. – Grab

Answer 2

An easier approach using Resharper and Visual studio.

Just put as your first line in the js file:

QUnit.moduleDone = function(){}

The Resharper test won't finish and you can refresh your page in browser as many times you want. You may put a breakpoint then and rerun the test by hitting F5 in browser.

Example:

At the very top of your page you should have:

• your references first
• QUnit.moduleDone = function() {};

like so:

/// <reference path="Scripts/jquery-ver**.min.js"/>
/// <reference path="Scripts/jquery-ui.min.js"/>
/// <reference path="your_test_file.js"/>

QUnit.moduleDone = function() {};

This works perfectly!)

In your browser - just hit F12 (open debugger window), set your breakpoints and refresh the page with F5))

Cordwainer

you can kill the server by clicking "stop executing" (the stop-sign icon), then "stop execution" (the red-hand icon). – Bod

Thanks, I created something similar for my tests written with jasmine jasmine.currentEnv_.currentRunner_.finishCallback = function () {}; – Atmolysis

Answer 3

If you are using Firefox with the Firebug plugin, you can do this: add a debugger statement to your code where you want to break:

var x = 2;
debugger;
...

Set the Firebug option 'Active for all Web Pages' to true. In ReSharper options, Testing>JavaScript set Firefox as the browser to use (if it is not already your default).

Now Firebug debugger will break at the debugger statement.

PS I tried this with Chrome but couldn't get it to break. Anyone know how to do it?

Tiana

The same works in Chrome if you have the Dev Tools already open. If the dev tools are not already open, it won't stop when it hits debugger. – Kohlrabi