How to debug karma-based unit tests in Chrome or Firefox

9,215 views
Skip to first unread message

David Karr

unread,
Oct 8, 2013, 1:30:27 PM10/8/13
to karma...@googlegroups.com
I've got unit tests with coverage working with PhantomJS, running the build from Maven, using the Karma plugin.

I now need to understand how I can debug those unit tests in Chrome or Firefox (and maybe IE).  I tried just changing the browser in the Karma config to Chrome or Firefox, and setting "singleRun" to false. In both cases, the browser (testing Firefox right now) starts up, and I get a "Karma" tab that says "Karma v0.10.2 - connected" with a "DEBUG" button. I click the "DEBUG" button and I get a new tab titled "Karma DEBUG RUNNER". At this point, I tried installing Firebug.  I can now see that it's loaded my scripts, but it's at this point I see that trying to debug unit tests while running code coverage is impractical.

The other thing that seems odd is that it doesn't seem as if the unit tests are being executed.  The browser starts up, but nothing is happening. The shell that I started the build from is blocked on the browser.

I need to figure out the easiest way to temporarily disable code coverage in my build, so debugging unit tests is practical.

Once I figure that out, I'm a little confused about what the operational steps are here. I couldn't find any explicit documentation on what I'm supposed to do here. I know how to use Firebug.

David Karr

unread,
Oct 8, 2013, 2:31:51 PM10/8/13
to karma...@googlegroups.com
I determined that just temporarily removing "coverage" from the "reporters" element in the POM effectively disables code coverage. I found that after the browser starts up, and after I install Firebug, the scripts I can see are not modified for coverage.

It's really annoying that if I'm using Firefox, I have to manually install Firebug every time the test runs.

The worst problem at this point is that it doesn't seem to be actually running the test.  The browser starts up, it loads relevant files, and just sits there.

David Karr

unread,
Oct 8, 2013, 5:46:46 PM10/8/13
to karma...@googlegroups.com
I guess I've figured this out. I at least understand how it's working. On the tab I get after clicking "DEBUG", I have to load my debugger tool, set breakpoints, and then reload the page. I realized that the default Firefox dev tools are all I need, unless I need some Firebug-specific feature, in which case I do have to reinstall it every time. 

Michael Van

unread,
Oct 9, 2013, 4:24:57 AM10/9/13
to karma...@googlegroups.com
Hi, I think that there should be some CLI options for Firefox or Chrome, such as load user-data or plugins-path. Karma has step out one foot only, why not the other?

在 2013年10月9日星期三UTC+8上午5时46分46秒,David Karr写道:

Vojta Jína

unread,
Oct 12, 2013, 9:06:14 PM10/12/13
to karma...@googlegroups.com
Do not use coverage during development, it slows down and makes debugging very hard. It's better to have a separate build for coverage, that runs only on your CI server.

Karma will disable the coverage, as long as you don't use "coverage" reporter. So run it with `--reporters progress` and you should be fine.

You can capture any browser manually. So open your regular Firefox (with Firebug installed) and navigate to http://localhost:9876/debug.html

By default, Karma opens browsers with an empty profile, without any extensions.

You can also put "debugger" statement into the code and the browser will jump into debugger (as long as the web inspector is open), at least in Chrome.

V.


--
You received this message because you are subscribed to the Google Groups "karma-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to karma-users...@googlegroups.com.
To post to this group, send email to karma...@googlegroups.com.
Visit this group at http://groups.google.com/group/karma-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/karma-users/cd43d557-7dfb-4b3d-8bb9-4d5c520b483c%40googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

David Karr

unread,
Oct 13, 2013, 2:46:57 PM10/13/13
to karma...@googlegroups.com


On Saturday, October 12, 2013 6:06:14 PM UTC-7, Vojta Jína wrote:
Do not use coverage during development, it slows down and makes debugging very hard. It's better to have a separate build for coverage, that runs only on your CI server.

Yeah, I got that.  I'm putting everything for the coverage configuration in the karma.conf.js except the entry in "reporters". I override this in the Maven plugin config, which is used on the build server and command-line dev builds.
 

Karma will disable the coverage, as long as you don't use "coverage" reporter. So run it with `--reporters progress` and you should be fine.

You can capture any browser manually. So open your regular Firefox (with Firebug installed) and navigate to http://localhost:9876/debug.html

That's handy and simple.

marek...@gmail.com

unread,
Nov 10, 2016, 12:07:08 PM11/10/16
to karma-users
Hello I have the same problem.
I want to debug a single test. In my karma.config I have updated this line  :  reporters: [ 'mocha', 'coverage', 'remap-coverage', 'progress', 'html' ],
into  reporters: [  'progress' ],

But with no success, it does not hit breakpoint when I want to debug this test.

Can someone help me how to debug single unit test in karma? I am using latest webstorm.
Reply all
Reply to author
Forward
0 new messages