如何在 JS 堆栈跟踪上使用源映射？

Question

当我在 JS 代码上出错时，我有这种堆栈跟踪：

Error while processing route: admin.subscriptions/edit The adapter operation was aborted Error
    at n.i (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:1375)
    at n (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:1600)
    at u (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:4777)
    at i.c.error (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:8222)
    at u (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:5:17397)
    at Object.fireWith [as rejectWith] (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:5:18168)
    at r (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:6:22154)
    at XMLHttpRequest.<anonymous> (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:6:26964)
    at XMLHttpRequest.r (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:50:30564)

如您所见，它是缩小文件，似乎没有使用源映射文件。源映射文件运行良好。它在 Chrome 和 Firefox 上执行此操作。

我怎样才能拥有更好的堆栈跟踪？

Answer 1

当你打开开发工具并按F1或点击右上角的三个点时，在Sources下你可以Enable JavaScript source地图。确保选中此选项。

请记住，如果您希望映射错误堆栈跟踪，浏览器需要能够访问您的源映射。在生产中，您可能希望对用户隐藏它，因为他们可能不关心它并检查您的非混淆代码。像 Sentry 这样的服务提供了向它们上传 sourcemaps 的能力，这样错误只会对开发人员进行美化。

有些人还遇到源地图未重新加载的问题。要修复它，您可以通过按 Alt + R.

重新加载 DevTools。

鉴于您并没有真正告诉我们您使用的是什么构建系统以及您的缩小过程，也许问题在于您如何生成它们。

对于 gulp，以下是使用 sourcemaps plugin 生成源映射的方法：

import sourcemaps from 'gulp-sourcemaps'

gulp.task('js', () => {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
     // other pipes..
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'))
})

在 webpack 下，你只需要将 devtool setting 更改为 inline-source-maps 或 source-maps 之类的东西。还有一些其他设置，它们准确地详细说明了适合生产的设置，并比较了那里的 speed/mapping。

source-map-support 在 node 中也很有用，但您仍然需要生成源映射并 link 它带有 sourceMappingURL 注释。

如何在 JS 堆栈跟踪上使用源映射？

How to use source map on the JS stacktrace?

javascript

source-maps