How can I get source maps to work when running tests using ember-qunit for an ember app built on ember-cli

Question

I have an Ember app built using ember-cli and I'm writing my tests using the ember-qunit testing adapter and running them in the browser using testem as instructed in the ember-cli documentation. Although debugging in Google Chrome works fine when I'm interesting with my app, I am unable to use many debugging features such as breakpoints when running my tests.

I often run into a problem that my tests fail despite my actual app seeming to work properly, and to investigate the problem I would like to step through code while my tests are running.

But when I step into code that appears in vendor.js I just just see the following contents in my vendor.js:

// Please wait a bit.
// Compiled script is not shown while source map is being loaded!

These two lines are lines 6 & 7 of the file. The lines before this are blank, and these two lines are the last lines in the file. The debugger has the first line of the file highlighted as if that's the current location in the source, but it cannot show the source for some reason.

I can proceed to step through the code, but I can't see anything.

However, if I find vendor.js in the list of sources in the developer tools sources file list then it opens as a separate source tab and I can see all my code. At this point I have two tabs labeled vendor.js, one with all my vendor assets and one with just those line quoted above.

I am guessing that there is something different between how my tests are served and how my app is served in the development environment that is confusing Chrome.

I am using the following versions of things:

ember 1.9.1
ember-data 1.0.0-beta.14.1
ember-cli 0.1.9
qunit 1.17.1
ember-qunit 0.2.0
testem 0.6.33

Although I've poked around a bunch I don't really have any leads on where the problem is stemming from. Perhaps it's related to how testem is running the tests? Or could it be something that gets included in my tests has a messed up source map?

I appreciate any help or ideas.

Answer 1

I'm on ember-cli 0.2.2.

I ran across this problem as well and found this Chrome issue with processing sourcemaps. People commenting on the issue suggest using the Chrome Canary build for now:

I'm currently using the Canary build to put breakpoints in and debug my ember code.

Get it here: https://www.google.com/chrome/browser/canary.html