如何在JS stacktrace上使用源映射？

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或单击右上角的三个点时，您可以在“源”下启用 JavaScript 源映射。确保选中此选项。

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

有些人还遇到了源映射未重新加载的问题。要修复此问题，您可以按Alt+重新加载 DevTools R。

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

对于 gulp，以下是使用sourcemaps 插件生成 sourcemap 的方法：

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 设置更改为inline-source-maps或 之类的内容source-maps。还有一些其他设置，它们精确地详细说明了适合生产的设置，并比较了那里的速度/映射。

source -map-support在节点中也很有用，但您仍然必须生成源映射并将其与注释链接sourceMappingURL。