Fundebug支持通过SourceMap还原错误栈(stacktrace)

你的名字 2022-05-19 00:56 216阅读 0赞

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

![1240][]

### 为什么需要压缩代码? ###

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

> 压缩，减小体积。比如jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。  
> 多个文件合并，减少HTTP请求数。  
> 其他语言编译成JavaScript。最常见的例子就是CoffeeScript。

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

### 为什么需要Source Map? ###

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

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

![1240 1][]

### 如何生成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][Fundebug_ - _Source Map]

**参考链接**

1.  [JavaScript Source Map 详解][JavaScript Source Map]
2.  [Source Map Revision 3 Proposal][]
3.  [Fundebug文档 - Source Map][Fundebug_ - Source Map]

[1240]: /images/20220519/e0f214d6df3b484e85d7ea3dd5aa045f.png
[1240 1]: /images/20220519/d2d9ab337e3d47bdb7d62d0a41f13e41.png
[Fundebug_ - _Source Map]: https://docs.fundebug.com/notifier/javascript/sourcemap/upload.html
[JavaScript Source Map]: http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
[Source Map Revision 3 Proposal]: https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit
[Fundebug_ - Source Map]: https://docs.fundebug.com/notifier/javascript/sourcemap/