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

Question

二手版本：0.0.28-master-e49f47e669

我刚开始玩ember-cli（很棒的项目顺便说一句。）。

使用＆＃39; ember serve＆＃39;启动服务器后，我查看了Chrome-Dev-Tools中的源代码（foo.js）。 Chrome需要几秒钟来加载foo.js，正如您在屏幕截图中看到的那样，所有JS文件都包含在eval中。

如何调试JS代码？我在这里缺少什么？

Answer 1

我在Chrome中获得了相同的eval(…)块。我不知道究竟是什么造成了这种情况，但此时似乎没有办法解决这个问题。

在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，但工具尚未准备好。