如何调试由ember-cli生成和提供的Javascript代码？

Question

二手版本:0.0.28-master-e49f47e669

我刚开始玩ember-cli(很棒的项目顺便说一下.).

使用'ember serve'启动服务器后,我查看了Chrome-Dev-Tools中的源代码(foo.js).Chrome需要几秒钟来加载foo.js,正如您在屏幕截图中看到的,所有JS文件都包含在eval中.

我该如何调试JS-Code？我在这里错过了什么？

Answer 1

我eval(…)在Chrome中获得了相同的块.我不确切知道是什么导致了这一点,但看起来目前还没有解决办法.

在Firefox由输出代码ember server 是在浏览器的调试视图便于阅读,但它可能不是你所期待的.

不幸的是,Ember-CLI缺乏对Javascript源映射的完全支持,这就是我们需要在浏览器的调试视图中看到我们实际在Javascript ES6或CoffeeScript中编写的原始代码.缺少源映射目前是Broccoli的限制,Broccoli是Ember-CLI使用的底层构建工具.这显然是将来可能添加的功能:

现有插件缺少的另一件事是源地图支持.由于性能方面的考虑,以及链接插件需要使用其他插件的源映射并正确地进行互操作这一事实,这有点复杂,所以我还没有时间来解决这个问题.

资料来源:http://www.solitr.com/blog/2014/02/broccoli-first-release/

这些问题与您的问题有些相关:

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

更新

事实证明,您可以在浏览器的调试视图中看到几乎原始代码.在Chrome中,它有点隐藏在(no domain)标题下:

这不是您在Ember-CLI的EcmaScript 6模块中编写的原始代码,但它几乎相同.我们在这里看到的是通过ES6-transpiler运行后的Javascript代码.比较这两个,原始在编辑器的底部:

希望将来我们能够在浏览器的调试视图中看到原始的Javascript甚至是Coffeescript,但工具尚未准备就绪.