15

Used version: 0.0.28-master-e49f47e669

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

After starting the server with 'ember serve', I had a look at the source (foo.js) in the Chrome-Dev-Tools. It takes Chrome several seconds to load foo.js, and as you can see in the screenshot, all JS-Files are wrapped in eval.

How can I debug the JS-Code? What am I missing here?

How do I debug this?

Steven
  • 439
  • 4
  • 15

1 Answers1

15

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:

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:

Chrome debug view

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:

Chrome debug view and original ES6 Javascript

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.

JeroenHoek
  • 1,448
  • 15
  • 24
  • 1
    Source maps was the missing glue! Ember-CLI has support for source maps. Just look at the end of an eval. CMD+P and you can debug your code. The problem with the unresponsive Dev-Tools is still valid though. – Steven May 28 '14 at 10:09
  • Wow, I completely overlooked that! This shows us almost the original source: this is the source after it is ran through the ES6-transpiler, but that isn't too far from the original code, and already quite helpful. – JeroenHoek May 28 '14 at 11:09
  • 2
    Has anybody figured out how to debug Ember CLI apps in Firefox? – szimek Nov 15 '14 at 14:38
  • 1
    has anything improved on the broccoli front? – Nikos Nov 27 '14 at 17:07
  • 1
    @Nikos: Looks like source map support is coming soon: https://github.com/stefanpenner/ember-cli/issues/1513 – JeroenHoek Nov 28 '14 at 14:30
  • apparently the source maps produced aren't that great and they still suppress the error messages. maybe it's because I'm on an older version of ember and ember-cli though that I'm having issues still –  Nov 16 '15 at 15:58