如何将堆栈跟踪从浏览bundle转换为原始源代码位置

Question

我想从我的JavaScript应用中未熟悉的异常报告堆栈跟踪，但问题在于随附的JavaScript是浏览捆绑包。这意味着，当我获得异常的堆栈时，即使JavaScript捆绑包包含源地图！

，它也指捆绑文件中的位置！

如何将堆栈中的文件位置转换为原始源文件？我想这涉及源地图的使用？

下面是一个示例程序，它打印了一个例外的堆栈跟踪：

index.html

<script src="/bundle.js"></script>

index.js

window.onerror = (message, url, line, column, error) => {
  console.log(`An exception was caught for URL ${url}, line ${line}:`, error.stack)
}
const thrower = () => {
  throw new Error(`Catch me if you can`)
}
const callingThrower = () => {
  thrower()
}
callingThrower()

生成捆绑包

# The --debug flag enables inline source maps
browserify --debug -o bundle.js index.js

程序输出

An exception was caught for URL http://localhost:8000/bundle.js, line 7: Error: Catch me if you can
    at thrower (http://localhost:8000/bundle.js:7:9)
    at callingThrower (http://localhost:8000/bundle.js:11:3)
    at Object.1 (http://localhost:8000/bundle.js:14:1)
    at s (http://localhost:8000/bundle.js:1:254)
    at e (http://localhost:8000/bundle.js:1:425)
    at http://localhost:8000/bundle.js:1:443

浏览器

我已经在OS X上使用Chrome和Firefox进行了测试。

Answer 1

一个 thick 您可以在代码中执行 sourcemaps strong>

源地图是告诉您的浏览器在转换代码中翻译行引用和原始代码中的行引用。

中的行引用。

这是一个很好的链接，以了解Sourcemaps

启用源地图在 browserify 中非常容易。您只需要运行

browserify --debug main.js -o bundle.js

--debug告诉您在 bundle.js中包括 sourcemaps ，但对于劣势，它使您的捆绑包是大

的两倍

但是，您可以告诉用户使用插件Exorcist分别下载此文件，并将源地图拆分为bundle.js.map

对我来说，我添加 browserify options 在 gulpfile.js中为 gruntfile.js as

browserify: {
        dist: {
            src: ['src/main.js'],
            dest: 'dist/bundle.js',
            options: {
                debug: true
            }
        }
    },

要启用它或如本线程中所述，您可以将browserifyOptions代替为

options: { browserifyOptions : {} }