问题标签 [source-maps]

我正在使用资产管道开发 Rails 应用程序。development.rb 有以下内容：

在开发环境中，资产没有捆绑在一起，每个资产都由 Rails 单独提供。此时，单独提供服务的资产数量超过 50 个。因此，整页重新加载非常慢。

我想将它们至少连接到一些资产中，以加快开发环境的加载时间，但这样做，我失去了在 Chrome 开发工具中单独调试/查看它们的能力。示例：http ://d.pr/i/ZFge

据我所知，有两种方法可以解决这个问题，在你这样做之后：

并开始将它们作为级联资产提供服务。

1. 旧黑客方式：@sourceUrl 技巧。
2. 新方式：sourceMaps。

是否有关于如何在 rails 应用程序上启用它们的指南？我不使用 CoffeeScript，所以https://github.com/markbates/coffee-rails-source-maps没有帮助。大多数谷歌搜索都会导致这种情况。

我正在寻找原生 JS 的解决方案。

我已经听到越来越多的关于源映射以及如何使用 Closure 编译器生成它们，以在编译和最小化代码后提供您在开发中习惯的所有调试优势。显然，还支持编译为 js 的语言，如 CoffeeScript。

我觉得这非常酷！（感谢所有参与使这成为可能的人）

我感兴趣的是：

1. 这是如何实现的？（主要问题）
2. 为什么这很有用（而不仅仅是在开发模式下调试）？（次要）

在单步执行缩小的库代码等时，源映射非常有用。默认情况下，使用源映射的 .js 文件的前几行可能如下所示：

如果您不在jquery.min.map同一个目录中，支持源映射的浏览器将发出冗余的 http 请求，从而导致 404 错误（听起来很熟悉，favicon 任何人？）。

我注意到这sourceMappingURL可能指向另一个域；我不提倡这种做法，但它不受 CORS 约束似乎很奇怪：

映射的未缩小来源是否安全？即，如果在上面的示例中映射的服务器被破坏并且恶意代码被添加到源中，它会/会被执行吗？如果您正在调试代码并单步执行它呢？我找不到任何可以回答这个问题的实现细节。

我正在尝试教自己和可能的其他人如何使用源映射，所以我通过 Gruntfile 做了一个示例。

如果您在 Chrome 中访问 http://webjay.github.io/sourcemaps/并打开控制台并单击 app1.coffee，您将正确看到源代码行。

但是，如果您单击子文件夹中的 app2.coffee，您将看到正确的源代码文件，但不会被带到正确的行。为什么以及如何解决这个问题？

我的存储库在GitHub 上，随时可以贡献。

假设我有一种看起来像的语言

转换为

如果这种语言的用户

$__Helpers.print说“预期字符串”会抛出 TypeError 。我希望开发人员工具将该print 5行显示为此错误的原始调用。我知道如何让我的源映射显示一个看起来像的调用堆栈

其中transpiled_script.js:2是$__Helpers.print函数调用original_script.os:1的脚本和行号，是调用的脚本和行号print 5。我想让开发工具忽略对顶部的调用transpiled_script.js（这只是我的转译器的一个实现细节），只显示来自原始脚本的调用（这是他们应该在自己的脚本中调试的部分）。

我显然不能简单地映射transpiled_script.js:2到，original_script.os:1因为可能会多次调用printinside original_script.os，所以这不是一对一的关系。

有没有办法做到这一点？

（我正在使用 escodegen 生成我的源代码和源映射（escodegen 使用 Node mozilla/source-map 模块），因此有一种方法可以告诉 escodegen 或 mozilla/source-map 这样做是理想的，但我可以覆盖escodegen 的输出，如果那是不可能的。）

在 Google Chrome 中，我想知道堆栈跟踪是否会在未来提供映射支持。目前，使用源映射，抛出错误将提供指向我的 TypeScript 文件的行号链接，但是......当调用 Error.stack 时，它会给我 JavaScript 行和文件。

这是一张参考图片： http: //puu.sh/4DTOG.png

您会注意到，错误所在的实际行链接到 TypeScript 文件，但堆栈跟踪链接到 JavaScript 文件。

我花了一些时间尝试在 Chrome 和我的 .scss 文件之间设置源映射，以便我可以在浏览器中编辑和保存以进行一般调试。不过，更重要的步骤之一似乎是启用 DevTools 实验，然后选择“支持 Sass”。好吧，我已经启用了几次实验，但仍然没有支持 Sass 的框。Chrome 是否可能会自动将其包含在较新的更新中？

用于证明其不存在的屏幕截图。（没关系，我不允许发布它）。

我最近开始使用 uglify-js 来压缩我的 JavaScript。源映射是一个很好的调试功能，但对我们来说，压缩 JavaScript 的部分好处是混淆。

将源映射放在受密码保护的目录中会阻止被动观察者使用它来重新美化我们的 JavaScript 吗？他会有什么不良副作用吗？

我不熟悉浏览器如何以及何时请求此文件。我不希望它触发密码提示和给用户带来不便，但我也不希望它公开可见。

在使用 karma 测试运行器进行测试时，我正忙着让调试器与我的咖啡脚本文件一起工作。

假设，我需要做的就是告诉 Webstorm 文件观察器生成源映射，调试器将与 karma 测试运行器一起工作。不幸的是，调试器似乎无法识别 coffeescript 编译器输出的映射文件。它寻找 file.coffee -> file.js.map。然而，尽管试图获得其他结果，但地图文件始终是 file.coffee -> file.map

我的业力配置文件具有以下内容（显然不是全部，只是相关部分）：

我已经用文件观察器尝试了各种配置：

带有参数的单个文件观察程序：“--compile --bare --map $FileName$”，输出路径刷新为：“$FileNameWithoutExtension$.js.map”或“$FileNameWithoutExtension$.js:$FileNameWithoutExtension $.js.map"

第一个版本生成一个空白 file.js.map，第二个版本生成一个空白 file.js.map 和标准 file.map，这是一个很好的 sourcemap 文件。

我尝试了一个只有“--compile --bare”输出路径的文件观察器：“$FileNameWithoutExtension$.js”和一个只有“--map”输出路径的文件观察器：“$FileNameWithoutExtension$.js.map ”。这会输出一个空白的 file.js.map 并且没有实际的地图。

我已经尝试了一个只有“--compile --bare”输出路径的文件观察器：“$FileNameWithoutExtension$.js”和一个只有“--compile--map”输出路径的文件观察器：“$FileNameWithoutExtension$。 js.map”。这会输出一个空白的 file.js.map 并且没有实际的地图。

同时，当我在调试模式下运行测试时，Karma 服务器报告：

显然，服务器假设地图将被称为 file.js.map，而实际上 coffeescript 输出的 file.map 没有“js”。我似乎无法更改输出源映射文件的名称，也看不到在哪里告诉调试器要查找的内容。

顺便说一句，调试器还告诉我，它找不到加载了我的文件（如 angular.js 和 jquery.js）的非咖啡脚本库的映射文件。也许这就是问题所在的线索。

我已经向 JetBrains 提交了一张票，并将在这里分享他们的回复。但是，如果有人知道解决方案，请告诉我。

谢谢！

我已经使用 实现了客户端异常日志记录window.onerror，我在其中检索当前错误和堆栈跟踪，并使用 AJAX 将其发送到服务器

printStackTrace这个库提供的函数在哪里：http: //stacktracejs.com/

问题在于，在生产中所有 JavaScript 文件都被缩小，因此堆栈跟踪和行号并没有真正有用，因为所有错误都在文件的第 1 行报告，这是正常的，因为缩小版本包含一行代码。例如：

可以使用源映射来改进这一点，还是仅在开发者工具处于活动状态时才有效？

当没有激活​​开发人员工具/启用源映射的用户发生错误时，我想要的是使用源映射（或至少是实际行号）获取完整的堆栈跟踪。这可能吗？