Rails 编译的 javascript 资产调试答案

【问题标题】：Rails compiled javascript asset debugRails 编译的 javascript 资产调试
【发布时间】：2019-09-11 11:39:00
【问题描述】：

在捆绑了我的 javascript 资产的生产环境中，当我捕获到一个 javascript 错误时，我会得到它的行和列，例如：

d86c04c8f3.js:2:9588

现在，由于文件被缩小等，很难进行逆向工程并在源代码中找到有问题的行。给定 line/col 以找到原始线路，rails assets bundler 是否有办法进行逆向工程？这应该是可能的，因为资产构建器拥有它需要的所有信息。

我们需要一个简单的选项来运行 bundle exec rake assets:precompile RAILS_ENV=production 再次，但这次指定 line+col，然后 rake 将输出源文件 + line 对应于该资产 line+col 的内容。这样我们就可以轻松调试在客户端捕获的异常（并发送到服务器进行监控）。

编辑1

所有关于在客户端做某事的解决方案都是不可行的，因为我们无法访问客户端 - 我们谈论的是在生产模式、实时模式中发现的异常，并且正在发送到服务器用于监控目的。

【问题讨论】：

这可能不是一个合适的解决方案，但您可以使用 chrome 调试工具 pause on exception 对其进行调试。它可能会让您了解引发异常的位置。
Rails 通过 Sprockets 源映射 (stackoverflow.com/a/21007408/18706)，但您可能需要对其进行配置以用于生产。
Chrome 开发工具为您的资产提供了一个“美化”选项（当您在“源”选项卡上打开文件时，有一个“{ }”按钮带有“漂亮的打印”标题）。
@UdAY，arieljuod 看到编辑 - 这是一种现场制作模式，我们无权访问客户端的浏览器。 mahemoff - 这是现场制作模式的解决方案吗？我不想更改捆绑的 javascript 资产。我想保持苗条。开发环境拥有完成这项任务的所有信息。

标签： javascript ruby-on-rails debugging assets

【解决方案1】：

对于调试缩小的脚本，有源图，一旦加载到浏览器中 - 你可以在那里看到未缩小的代码。

Sprockets 计划在 4.0 中支持 sourcemaps，但尚未发布（只是测试版）。

Webpack 确实支持 sourcemaps，并且默认情况下将 rails 6 切换到 webpacker，因此将脚本转换为包似乎是合乎逻辑的，尽管对于大型项目来说这是一项艰巨的任务

更新：一旦您有了构建的源映射，您就可以使用如下工具：

npx source-map-cli resolve d86c04c8f3.js.map 2 9588

这将告诉您代码在缩小文件映射中的位置，格式如下：

Maps to webpack:///app/javascript/components/CountrySelector.jsx:14:0

    fetch(`/control/autocomplete/countries`).then(r => r.json()).then(countries => this.setState({countries}))
    ^

【讨论】：

查看我的编辑。我们无法访问客户端的浏览器，因为问题发生在生产/实时模式下。解决方案应该非常简单——创建包的代码可以选择在到达预先知道的行/列时停止并输出它当前所在的源文件——这是一个简单的解决方案，问题是如何修补资产构建器。
@NadavB 键是源地图，一旦你拥有它 - 你可以将该位置映射到原始源，请参阅更新
谢谢，你提到了Rails 6，但它还没有发布，对吧？
@NadavB rails 6 处于候选发布阶段，您已经可以使用它，但是 webpacker 可以很好地与 rails 5 一起使用，它不是默认的