开发者社区> fundebug> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

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

img_195763087fbc926c7fd92f9935970408.png
Paste_Image.png

为什么需要压缩代码?

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

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

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

为什么需要Source Map?

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

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

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

img_63f228f704e6db09149cc5f2bd12f20f.png
example

如何生成Source Map?

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

如何使用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:

参考链接

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
exception(359): error C2220: 警告被视为错误 - 没有生成“object”文件
exception(359): error C2220: 警告被视为错误 - 没有生成“object”文件
0 0
编译OpenJDK12:methodMatcher.cpp error C2220 警告被视为错误 - 没有生成“object”文件
编译OpenJDK12:methodMatcher.cpp error C2220 警告被视为错误 - 没有生成“object”文件
0 0
如何去寻找解决bug?(以Mapped Statements collection does not contain value for xxx的异常为例)
如何去寻找解决bug?(以Mapped Statements collection does not contain value for xxx的异常为例)
0 0
记录一次执行ArrayList的add方法异常细节复盘| Java Debug 笔记
记录一次执行ArrayList的add方法异常细节复盘| Java Debug 笔记
0 0
error C2220: 警告被视为错误 - 没有生成“object”文件
原文:error C2220: 警告被视为错误 - 没有生成“object”文件 这种错误的原因是:原因是该文件的代码页为英文,而我们系统中的代码页为中文。
1787 0
dump_stack调用过程【原创】
dump_stack调用: void dump_stack(void){    dump_backtrace(NULL, NULL);} 继续看: static void dump_backtrace(struct pt_regs *regs, struct task_struct *tsk)...
424 0
VLC调试:增加messages.c日志函数,在无vlc_object_t下打印日志
在调测VLC源码时经常需要借助日志打印其中核心变量、临时变量的值,方便学习和定位问题,但是遇到像src\input\clock.c中的函数,因缺少vlc_object_t *obj对象,无法打印日志。
995 0
VS2008 Project : error PRJ0019: 某个工具从以下位置返回了错误代码: "正在执行生成后事件..."解决方案
右键工程属性 -> 配置属性 -> 生成事件 ->生成后事件,命令行中的路径加上双引号,如 copy $(ProjectDir)\export\win32\Debug\$(ProjectName).dll $(OutDir) 修改为 copy "$(ProjectDir)\export\win32\Debug\$(ProjectName).
847 0
+关注
fundebug
一行代码搞定BUG监控!
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载