问题标签 [source-maps]

我试图了解 css 源映射是如何工作的。我创建了一个非常简单的 scss 文件。

当我编译上述 scss 时，我得到以下地图文件。

当我解码“映射”时，我得到以下值。

这些价值观是什么？

我如何指示 google 闭包编译器为我的缩小文件创建一个映射文件，这些文件位于不同的文件夹中，保留正确的相对路径。

我什至无法在源映射生成中指定 sourceRoot 作为选项

我有一个 javascript 文件/Js/common.js，然后有一些其他文件/Admin/js/plugin.js

这是生成的 .map 文件

但它被浏览器误解了，因为它使用相对路径/Admin/Asset/Js/ ，它试图在/Admin/Asset/Js/js/common.js和/Admin/Asset/Js//Admin/Asset/js/common.js

- - -更新 - - -

供将来参考：如果您不想将闭包编译器复制到 js 文件夹（像我一样），则在调用它之前更改当前文件夹就足够了。

我已经编写了一个 AngularJS 应用程序，但它被证明是调试的一场噩梦。我正在使用 Grunt + uglify 来连接和缩小我的应用程序代码。它还会在缩小的 JS 文件旁边创建一个源映射。

当文件中存在 JS 错误但在 AngularJS 应用程序之外时，源映射似乎可以正常工作。例如，如果我写console.log('a.b');在其中一个文件的顶部，Chrome 调试器中记录的错误会显示原始文件的行+文件信息，而不是缩小的文件。

当 Angular 自己运行的代码（例如在控制器代码中）出现问题时，就会出现问题。我从 Angular 获得了一个不错的堆栈跟踪，但它只详细说明了缩小文件而不是原始文件。

我能做些什么来让 Angular 承认源地图吗？

下面的示例错误：

所以开始在 LuvvieScript 上取得进展，然后一切都在 Twitter 上开始了...... https://twitter.com/gordonguthrie/status/389659700741943296

Anthony Ramine https://twitter.com/nokusu指出我做错了，我应该通过 Core Erlang 而不是 Erlang AST 从 Erlang 编译到 JavaScript。这对我来说既是一个引人注目但又不吸引人的选择...... Twitter 不是该讨论的正确媒介，我想我会在这里写下来并获得一些建议。

战略概述

LuvvieScript 具有三个核心要求：

• Erlang 的有效子集，可编译为相同且高性能的 Javascript
• 一个完整的 Source Map，以便可以在浏览器中使用 LuvvieScript 而不是 Javascript 进行调试
• 一个“运行时”客户端 javascript 环境（带有服务器端通信），用于执行 LuvvieScript 模块（一种页内主管......）

这些选项中的第三个有点超出了本次辩论的范围，但前两个是核心。

有一个惰性 gits 推论——我想尽可能多地使用 Erlang 和 Javascript 语法工具（词法分析器、解析器、标记器、AST 转换等）并编写最少的代码。

目前的想法

代码的方式目前写成如下结构：

• 将代码编译为 Erlang AST（具有行号）
• 标记代码（保留注释和空白）并使用这些标记来构建将行/列信息映射到标记的字典
• 合并字典和 AST 以给出 line/col AST（有些人想要将不同的 arities 的 fns 分组）
• 将这个新的 Erlang AST 转换为在 SpiderMonkey Parser API https://developer.mozilla.org/en-US/docs/SpiderMonkey/Parser_API中实现的 Javascript AST
• 使用像brushtail这样的Javascript实用程序来改变Javascript AST中的尾调用https://github.com/puffnfresh/brushtail
• 使用像 ESCodeGen 这样的 Javascript 工具来发出 javascript https://github.com/Constellation/escodegen

基本上我得到一个看起来像这样的 Erlang AST：

然后我将它转换成一个 Javascript JSON AST，如下所示：

问题

Anthony 的观点说得很好——Core Erlang 是一种比 Erlang 更简单且更常规的语言，并且应该比普通的 Erlang 更容易转译为 Javascript，但它的文档记录不是很好。

我可以很容易地获得类似 AST 的 Core Erlang 表示：

但没有行列/编号。所以我可以得到一个可以生成 JS 的 AST——但关键不是 SourceMaps。

问题 1如何获取我需要的行信息 - （我已经可以从“普通”Erlang 令牌中获取列信息......）

Erlang Core 在生产过程中与普通 Erlang 略有不同，因为它开始将函数调用中的变量名替换为自己的内部变量名，这也会导致一些 Source Map 问题。一个例子是这个 Erlang 子句：

Erlang AST 很好地保留了名称：

Core Erlang 已经改变了函数中调用的参数的名称：

问题 2我可以在 Core Erlang 中保留或映射变量名吗？

问题 3我很欣赏 Core Erlang 的明确设计是为了让编译成Erlang 和编写改变 Erlang 代码的工具变得容易——但问题真的会让从Erlang编译出来更容易吗？

选项

我可以分叉核心 erlang 代码并添加源映射选项，但我在这里玩Lazy Man卡......

更新

作为对 Eric 的回应，我应该澄清我是如何生成 Core Erlang cerl 记录的。我首先使用以下方法将我的普通 Erlang 编译为核心 Erlang：

然后我在这个函数中使用core_scan和从：core_parsecompiler.erl

问题是我如何/我可以让该工具链发出带注释的 AST。我怀疑我需要自己添加这些选项:(

我正在编写一个工具，它将使用 browserify 转换在许多 JavaScript 文件的顶部和底部添加几行。我试图弄清楚如何生成包含原始源转换以及删除由我的附加行创建的偏移量的源映射。例如：

使用 coffeescript 编译器将其转换为

coffeescript 编译器还提供了一个 sourceMappingURL 指向一个映射，例如

我需要通过在前后添加几行来修改 JavaScript 文件输出。

我需要弄清楚如何使用咖啡脚本编译器提供的映射文件来映射我的更改，并通过咖啡脚本编译器，一直映射到原始咖啡脚本源。

目前，只要没有额外的源映射可以使用，我就可以进行此源映射。例如，如果我从 JS 而不是 CS 开始，我可以使用Thorsten Lorzen 的 inline-source-map 库生成一个源图，只要没有进行第二级转换，它就可以正常工作。在同一原始源上组合多个源映射时，我很困惑该怎么做。

任何帮助或建议将不胜感激。

我在项目中使用 grunt 并创建任务来缩小和连接许多 .js 文件。

我现在正试图弄清楚如何使用 Uglify 从它们中创建源映射，以便其他团队可以轻松地分析控制台中的代码。

我的 Gruntfile 的一部分（在咖啡中）看起来像这两个：

/

因此，当我在终端上运行“grunt devmin”时，我将获得缩小版本，但我不知道如何为它们创建相关的源映射以进行调试。

有人有提示吗？？

谢谢！

Safari 7 检查器出色地将编译后的 javascript 线映射回它来自的咖啡脚本。不过，有时我想直接与检查器中已编译的 javascript 交互。如何关闭源映射以便我可以使用原始 javascript？

我正在尝试在 Chrome 的开发人员工具中制作 AngularJS 的源地图。我做了一个简单的网页：

这被保存为index.html，然后我将三个 AngularJS 文件（ 和 ）直接从 Angular 的 bower 存储库复制angular.js到angular.min.js子目录angular.min.js.map中，然后lib确保在开发人员工具的设置页面中打开了“启用源映射”选项。我使用python -m SimpleHTTPServer. 然而，Chrome 甚至不会向服务器查询地图文件——它会显示在服务器的日志中。

然后我尝试加载源地图演示，例如Coffee Script 演示或HTML5Rocks页面上链接的演示……它们都没有真正加载地图文件，我猜它们会显示在“网络”选项卡中。

这是 Debian SID 系统上的 Chrome 28.0.1500.95。

我做错了什么？

您是否知道包含使用 grunt 编译的应用程序的源映射的工作流？

我很清楚这样的插件uglifyjs可以让你简单地生成一个源映射。但我正在寻找将其整合到更复杂的工作流程中，而不仅仅是制作一次性的源地图。

我注意到最流行的 Yeoman 生成器（据我所知）在其工作流程中缺少源映射。这仅仅是因为源地图的主要插件缺乏支持吗？或者是不是工作流程中不需要源映射，我只是想不出一个足够聪明的替代方案？

我遇到的流行的 grunt 插件的显着问题来源包括：

uglify如果没有hacky 修复，甚至无法处理最基本的项目结构。

usemin除了最简单的配置之外，也无法处理源映射，因为它实际上只能支持每个项目一个（但仍然需要 hack 来纠正它）。一个可能的解决方案显然是usemin完全停止使用，但是你会失去它的所有好处，比如将它与rev、watch和connect.

我在想，当我测试我的应用程序时，我最好的做法可能是使用未连接/未缩小的源进行测试。当然，这不太理想，因为我希望我的测试环境尽可能地反映生产环境。

你在你的 grunt 项目中使用源映射吗？你怎么做呢？如果没有，您如何解决缺乏对他们的支持的问题？

我正在做的项目是使用代码来运行 less 编译器。

我无法从我的 less 文件中将内联源映射添加到已编译的 css。从节点我们正在运行以下代码：

有没有我可以添加的选项？我试过添加sourceMap: true但outputSourceFiles: true没有成功。