如何调试ember-cli生成和提供的Javascript代码? [英] How to debug Javascript-Code produced and served by ember-cli?

问题描述

使用的版本:0.0.28-master-e49f47e669

我刚刚开始玩ember-cli(很棒的项目).

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

使用"ember serve"启动服务器后，我查看了Chrome-Dev-Tools中的源代码(foo.js).Chrome浏览器需要几秒钟的时间来加载foo.js，如您在屏幕截图中所见，所有JS文件都包装在eval中.

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.

如何调试JS代码?我在这里想念什么?

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

推荐答案

我在Chrome中得到了相同的 eval(…)块.我不知道是什么原因造成的，但目前看来尚无解决方法.

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.

在Firefox中， ember服务器 输出的代码在浏览器的调试视图中可以读取，但可能不是您想要的.

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.

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

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.

来源: http://www.solitr.com/博客/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

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

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:

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

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:

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

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.

这篇关于如何调试ember-cli生成和提供的Javascript代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！