外部源映射工具答案

【问题标题】：External Source Map Tool外部源映射工具
【发布时间】：2015-05-05 04:50:48
【问题描述】：

我在生产中有一个最小化的文件，带有一个记录错误的错误处理程序，以及在我缩小文件时生成的源映射，但是我无法将错误映射到我的源文件，因为错误在日志中，不会出现在 chrome 或 firefox 中，因为这些错误很容易使用压缩文件和源映射。是否有应用程序或工具可以使用我生成的源映射将错误报告从缩小文件转换为原始未缩小文件中的位置？所以要完全清楚，我有

dist.min.js

它由几个 js 文件组成，然后用 uglify.js 缩小。我有

dist.min.js.map

这是uglify缩小文件时生成的mapfile。我需要做的是接受错误

ERROR: Uncaught TypeError: Cannot call method 'indexOf' of undefined, dist.min.js:1 "TypeError: Cannot call method 'indexOf' of undefined at distmin.js:1:21815 at ab.event.dispatch (dist.min.js:3:25564) at q.handle (dist.min.js:3:22314)"

并找出错误在我的原始源代码中实际发生的位置。我知道如何在 Chrome 中使用 sourcemap，但是是否有外部工具可以让我手动输入行和列并在源代码中显示位置？

【问题讨论】：

你试过jsbeautifier.org
@DiegoZoracKy 我不想美化源，我有源和地图，我想确定源中发生错误的位置。
你在上面运行过 jshint 吗？通常，缺少分号之类的问题只会出现在缩小的代码中，并且可能有点不可预测。抱歉，我知道这对你原来的问题没有帮助，但我想我会把它扔进去，因为如果你还没有这样做，它可能会让你的问题消失。

标签： javascript uglifyjs source-maps

【解决方案1】：

你可以使用mozilla的source-map library来反向映射到原来的位置，如下：

var smc = new SourceMapConsumer(rawSourceMap); // <-- put map in there
console.log(smc.originalPositionFor({          // <-- plug positions here
     line: 2, 
     column: 28 
}));

输出类似于：

{ 
  source: 'http://example.com/www/js/two.js',
  line: 2,
  column: 10,
  name: 'n' 
}

该示例直接来自 Mozilla 的文档。相同的库用于generate the source-maps in uglifyjs（提到源映射生成时链接到 Mozilla 项目）。

【讨论】：

只是一个小提示：现在 SourceMapConsumer 返回一个承诺，所以你需要做new SourceMapConsumer.then(smc => {...})。不过效果很好。

【解决方案2】：

由于还没有为此构建的 GUI 工具，我基于Electron 和@tucuxi 指出的Mozilla Source-Map library 快速构建了one。

您可以在其 GitHub 页面上找到它：https://github.com/kriserickson/sourcemap-translator。

【讨论】：

【解决方案3】：

Uglify.js 有一个名为 source map 的东西来实现这种功能。请在命令中使用以下标志：

 --source-map yoursource.min.js.map

整个命令如下：

 uglifyjs yoursource.js -o yoursource.min.js --sourcemap yoursource.min.js.map

【讨论】：

我已经澄清了我的问题，不清楚我是否已经有源地图，但我有。我需要一种从源映射到错误行的方法。