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

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

有些人还遇到源 map 未重新加载的问题。要修复它，您可以在其中按 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。还有一些其他设置，它们准确地详细说明了适合生产的内容，并比较了那里的速度/映射。

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