【问题标题】:How to debug Javascript-Code produced and served by ember-cli?如何调试由 ember-cli 生成和提供的 Javascript 代码?
【发布时间】:2014-07-17 01:58:12
【问题描述】:

使用的版本:0.0.28-master-e49f47e669

我刚开始玩 ember-cli(顺便说一句,很棒的项目)。

使用“ember serve”启动服务器后,我查看了 Chrome-Dev-Tools 中的源代码 (foo.js)。 Chrome 加载 foo.js 需要几秒钟,从截图中可以看到,所有的 JS-Files 都包裹在 eval 中。

如何调试 JS 代码?我在这里错过了什么?

【问题讨论】:

    标签: ember-cli


    【解决方案1】:

    我在 Chrome 中得到了相同的 eval(…) 块。我不知道究竟是什么原因造成的,但目前看来没有办法解决这个问题。

    在 Firefox 中,ember server 输出的代码 在浏览器的调试视图中有些可读性,但它可能不是您想要的。

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

    现有插件缺少的另一件事是源映射支持。出于性能考虑,以及链式插件需要消耗其他插件的源映射并正确互操作这一事实,这会稍微复杂一些,所以我还没有时间解决这个问题。

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

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

    更新

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

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

    希望将来我们能够在浏览器的调试视图中看到原始的 Javascript 甚至是 Coffeescript,但工具还没有完全准备好。

    【讨论】:

    • 源地图是缺失的粘合剂! Ember-CLI 支持源映射。只看一个评估的结尾。 CMD+P,你可以调试你的代码。不过,无响应的开发工具的问题仍然有效。
    • 哇,我完全忽略了这一点!这几乎向我们展示了原始源代码:这是通过 ES6 转译器运行后的源代码,但这与原始代码相差不远,并且已经很有帮助。
    • 有人知道如何在 Firefox 中调试 Ember CLI 应用程序吗?
    • 西兰花方面有什么改进吗?
    • @Nikos:看起来源地图支持即将推出:github.com/stefanpenner/ember-cli/issues/1513
    猜你喜欢
    • 2014-09-15
    • 2013-05-21
    • 1970-01-01
    • 1970-01-01
    • 2018-09-19
    • 2023-03-27
    • 2015-09-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多