debug in browser using testacular (now karma)

I am trying to figure out the best way to debug my unit tests when I break them. Typically in previous test environments I could just run the tests in the browser and breakpoint the test, or the code and see why my test was failing. I can't seem to figure out how to do that with testacular. Is there an easy way to debug unit tests?

1. In karma.conf.js:

    browsers = ['Chrome'];
   

2. In your failing spec:

    it('spec', function() {
        debugger; // This is like setting a breakpoint
        // ...
    });
   

3. Run Karma.

4. Go to the newly opened Chrome Browser, open the console and refresh the page.

Now in Chrome's Developer Tools source tab you should see the execution stopped at the debugger.

Include "browsers = ['Chrome'];" in your karma.config file.

When Chrome opens, you should see "Karma - connected" at the top, with a "Debug" button to the upper-right.

Click this debug button, and a "Karma DEBUG RUNNER" tab will open. Then, simply right-click, inspect element, and debug as you normally would.

I found the following way to debug which doesn't require to make any changes in code (like adding "debugger" statement)

Set the "singleRun" as false in karma config file, such that karma will be listening on debug port and you can run the test again in browser launching the URL given below and debug:

> Go to the captured browser and click the "DEBUG" button (or open > http://localhost:9876/debug.html) and use the web inspector to see > what's going on. (You may need to refresh the debug.html page for it > to kick in once the web inspector is open.)

In your console you should notified which it() statement is breaking, and why. For example:

Todos Add a new todo should add a new todo FAILED
expected todo.length to be 1 but was 0

However, you may find it useful to set

logLevel = LOG_DEBUG;

in your karma.conf.js file.