外部源映射工具

Question

我在生产中有一个最小化的文件，有一个记录错误的错误处理程序，以及在我缩小文件时生成的源映射，但是我无法将错误映射到我的源文件，因为错误在日志中，不会出现在 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)"

并找出在我的原始源代码中实际发生该错误的位置。我知道如何将 sourcemaps 与 Chrome 一起使用，但是是否有外部工具允许我手动输入行和列并在我的源代码中显示位置？

Answer 1

Uglify.js 有一个名为 source map 的东西用于此类功能。请在命令中使用以下标志：

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

整个命令如下所示：

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

更多信息：

http://tarantsov.com/WorkflowThu/source-maps-with-coffeescript-and-uglify-js/

Answer 2

可以使用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 项目）。

Answer 3

由于还没有为此构建的 GUI 工具，我很快构建了 one based on Electron and the Mozilla Source-Map library @tucuxi 指出的。

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

外部源映射工具

External Source Map Tool

javascript

uglifyjs

source-maps