如何在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 + 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'))
})

在网络包下，您只需将devtool setting更改为inline-source-maps或source-maps。还有一些其他设置，它们精确地详细说明了什么适合生产，并比较那里的速度/映射。

source-map-support在节点中也很有用，但您仍需要生成源地图并将其与sourceMappingURL评论相关联。