How to debug Javascript-Code produced and served by ember-cli?

Question

Used version: 0.0.28-master-e49f47e669

I just started playing around with ember-cli (Great project btw.).

After starting the server with \'ember

Answer 1

I get the same eval(…) blocks in Chrome. I don't know exactly what is causing that, but it looks like there is no way around that at this moment.

In Firefox the code output by ember server is somewhat readable in the browser's debug view, but it is probably not what you are looking for.

Unfortunately, Ember-CLI lacks full support for Javascript source maps, which is what we need to see the original code we actually wrote in Javascript ES6 or CoffeeScript in the browser's debug view. The lack of source maps is currently a limitation of Broccoli, the underlying build tool used by Ember-CLI. This is apparently a feature that may be added in the future:

Another thing that’s missing with the existing plugins is source map support. This is slightly complicated by performance considerations, as well as the fact that chained plugins need to consume other plugins’ source maps and interoperate properly, so I haven’t found the time to tackle this yet.

Source: http://www.solitr.com/blog/2014/02/broccoli-first-release/

These issues are somewhat relevant your question:

• https://github.com/stefanpenner/ember-cli/issues/585
• https://github.com/stefanpenner/ember-cli/issues/839

Update

It turns out that you can see almost the original code in the browser's debug view. In Chrome it is a bit hidden under the (no domain) heading:

This is not the original code you write in Ember-CLI's EcmaScript 6 modules, but it is almost the same. What we see here is the Javascript code after it has been run through the ES6-transpiler. Compare these two, original at the bottom in an editor:

Hopefully in the future we will be able to see the original Javascript or even Coffeescript in the browser's debug view, but the tooling is not quite ready yet.