Fundebug支持通过Source Map还原错误栈(stacktrace)
发布在Fundebug2017年2月27日view:989BrettBat自动化Betti
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

Fundebug支持使用Source Map还原真正的错误位置。这样的话,开发者能够迅速定位出错的源代码。另外,Fundebug还能够展示出错的代码块,帮助开发者更快地解决问题。

source map

为什么需要压缩代码?

部署JavaScript脚本前,开发者通常会使用UglifyJS2等工具对代码压缩变换:

压缩,减小体积。比如jQuery 1.9的源码,压缩前是252KB,压缩后是32KB。

多个文件合并,减少HTTP请求数。

其他语言编译成JavaScript。最常见的例子就是CoffeeScript。

在生产环境中使用压缩的代码,能够有效加快访问速度。

为什么需要Source Map?

压缩代码的错误的位置信息(文件,行号和列号)已经失真,开发者很难定位源代码的位置。而且,压缩代码的变量以及函数名称都会进行变换,这也增加了开发者Debug的难度。

Source Map是一个JSON文件,其中包含了代码转换前后的位置信息。给定一个转换之后的压缩代码的位置,就可以通过Source Map获取转换之前的代码位置,反过来也一样。

Fundebug支持使用Source Map还原真正的错误位置。这样的话,开发者能够迅速定位出错的源代码。另外,Fundebug还能够展示出错的代码块,帮助开发者更快地解决问题。

example

如何生成Source Map?

各种主流前端任务管理工具,打包工具都支持生成Source Map。具体请参考Fundebug文档 - 生成Source Map:

  • UglifyJS2

  • Grunt

  • Gulp

  • Webpack

  • SystemJS

如何使用Source Map?

默认情况下,Fundebug会根据压缩代码中的sourceMappingURL下载Source Map文件,用户仅需要将生成的Source Map文件部署在服务器上,不需要额外操作。

如果用户不希望公开Source Map,则可以主动上传Source Map文件。Fundebug提供了两种不同的上传方式:

通过Fundebug的前端UI上传

  1. 进入『控制台』

  2. 选择『项目设置』

  3. 点击『Source Map』

  4. 选中需要上传的Source Map文件(支持上传多个Source Map文件)

  5. 点击『上传』

通过Fundebug的API上传

curl https://fundebug.com/javascript/sourcemap/upload \ -X POST \ -F apikey=195497e8297718ef87304f4d6f9783e4718e1d97200f87f28c7a28e34a6c1461 \ -F sourceMap=@dist/app.js.map 其中:

  • apikey为项目的apikey

  • sourceMap为需要上传的Source Map文件

具体请参考Fundebug文档 - 上传Source Map:

参考链接

评论
发表评论
暂无评论
WRITTEN BY
Fundebug
https://fundebug.com, 线上bug实时监控
TA的新浪微博
PUBLISHED IN
Fundebug

Fundebug提供Web前端JavaScript代码的线上错误(bug)监测。支持所有浏览器, 包括IE8, 后台通过智能聚合,将大量看似不同实则相同的错误聚合到一起,减少干扰。而且Fundebug插件的使用十分简单: 只需要添加一行代码,三分钟就可以享受实时线上错误监测服务。欢迎您免费使用! 官方网站:https://fundebug.com

我的收藏