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

最新推荐文章于 2024-07-04 20:30:00 发布
置顶 最新推荐文章于 2024-07-04 20:30:00 发布
阅读量3w 收藏
点赞数 1
分类专栏： Fundebug Fundebug 文章标签： javascript source-map 源代码 stacktrace
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fundebug/article/details/57993701
版权
Fundebug支持利用Source Map来还原错误位置，帮助开发者准确快速地定位并解决JavaScript压缩代码后的错误问题。Source Map是解决压缩代码后定位源代码困难的一种解决方案，Fundebug提供了便捷的Source Map上传和使用方式，包括前端UI和API接口，以便高效调试。
摘要由CSDN通过智能技术生成

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

support source map

为什么需要压缩代码?

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

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

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

为什么需要Source Map?

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

Source Map是一个JSON文件，其中包含了

最低0.47元/天 解锁文章
Fundebug
关注
专栏目录
通过Stack Overflow线程栈溢出的问题实例，详解C++程序线程栈溢出的诸多细节
dvlinker的技术专栏
08-04 1万+
通过Stack Overflow线程栈溢出的问题实例，详解C++程序线程栈溢出的诸多细节
Android 性能优化（三）认识错误Error和异常Exception及栈轨迹StackTrace
csdn_aiyang的博客
03-19 4985
前言 Android 性能优化之内存检测、卡顿优化、耗电优化、APK瘦身，这篇中我强调“运行稳定大于一切”，保证程序运行中不出现Crash，要比卡顿、耗电、安装包大小等方面更为重要。 造成Crash的原因有很多，而在程序运行过程中抛出了异常或错误就是其中最普遍的成因。本篇将对Exception和error有一个比较全面的认识。（当然，有不足之处，请多多包涵） 一、定义 th...
sourcemap-stack
05-17
sourcemap-stack 参数定义 参数属性 说明 mapUrl sourcemap 地址链接，如果不填，表示sourcemap地址跟实际js路径一样 mapName 参考webpack的地址格式，比如：[name].[hash].js.map mapEncrypt 如果map文件放到跟js同目录下，一起发布到cdn上，处于安全考虑，可以使用对称性加密map文件,加密包使用,如果没有加密，这项不填 desc js error 的堆栈信息 API getStackByError 根据错误的stack error信息，提取出调动的堆栈关系 Input: TypeError: console.logs is not a function at n (http://localhost:8082/app.js:6:180422) at a.clickme (http://localhost:8
source map 文件还原
juruiyuan111的专栏
11-19 3463
source map文件还原 有个Vue项目只有发布后的文件，需要修改部分功能，只能通过source map进行还原。网上有几个这样的还原工具，但多数都没法用了，记录一下自己的操作过程。 1、restore-source-tree 这个工具可以还原目录，文件好像还原不了，可以建目录。 2、shuji (周氏) 这个比较新，可以还原文件，但同名的文件会忽略掉不保存。 最后还是用谷歌浏览器，F12里的source，逐个文件下载，但必须把所有的页面都打开才能找到全部的代码。 3、reverse-so
Webpack: 基于Sourcemap源码映射原理与使用技巧
最新发布
Wang的专栏
07-04 1126
Sourcemap 协议最初由 Google 设计并率先在 Closure Inspector 实现，它的主要作用就是将经过压缩、混淆、合并的产物代码还原回未打包的原始形态，帮助开发者在生产环境中精确定位问题发生的行列位置，例如：在 Webpack 内部，这段生成 Sourcemap 映射数据的逻辑并不复杂，一句话总结：在钩子遍历产物文件assets数组，调用提供的map方法，最终计算出asset与源码之间的映射关系。
挖洞思路：前端源码泄露漏洞并用source map文件还原
热门推荐
白帽子九一
04-18 2万+
一、找到含.map的js页面 进入到一个*.js的页面查看源码： 选一个点进去拉到最下面： 后缀加上.map访问https://xxx.js.map 会直接下载app.91c9e19843b6a38f9ff5.js.map 二、source map文件还原 reverse-sourcemap 这个工具，两年前发布的，居然文件和目录都能全部还原出来，牛逼。 全局安装 npm install --global reverse-sourcemap 然后（ -o 后面跟的是还原后的目录） reverse-so
利用SourceMap还原前端代码
乡村的博客
01-14 2427
写在前面 最近做渗透测试过程中，在通过HTML源代码中的js找接口的时候发现可以通过浏览器调试功能的源代码处能够直接看到前端Vue具体的代码。 然后再网上查了查，找到一个工具（restore-source-tree）可以直接通过SourceMap 将前端代码还原到本地。 0x01 安装 restore-source-tree gitclonehttps://github.com/laysent/restore-source-tree.git cdrestore-s...
逆向还原sourcemap源码
qq_50854662的博客
12-11 2330
逆向还原sourcemap源码
Fundebug支持通过SourceMap还原错误栈(stacktrace)
qq_40126542的博客
07-18 654
Fundebug支持使用Source Map还原真正的错误位置。这样的话，开发者能够迅速定位出错的源代码。另外，Fundebug还能够展示出错的代码块，帮助开发者更快地解决问题。 为什么需要压缩代码? 部署JavaScript脚本前，开发者通常会使用UglifyJS2等工具对代码压缩变换: 压缩，减小体积。比如jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。 多个文件...
stack-source-map：添加对错误堆栈的源映射支持（仅Chrome）
02-04
尝试使错误堆栈与浏览器中的源映射一起使用，但仅支持Chrome。 该代码主要来自 ，但简化为仅与浏览器一起使用，并已固定为支持所有源映射模式 基本上，这是v8 一种hack 适用于babel和webpack :grinning_face_with...
source-map定位生产问题
weixin_43760969的博客
06-20 986
source-map定位生产问题
SourceMap 与前端异常监控
frontend_frank的博客
07-28 618
????加个关注，后续上新不错过~背景我们从事 Web 开发工作中，异常监控系统已经是我们朝夕相处的好助手，但是这些异常处理工具通常都是建立在 Web 生态，或者是假定运行在浏览器环境下...
js压缩代码后怎么生成source map_如何优雅地查看 JS 错误堆栈？
weixin_39714307的博客
11-29 219
原文：如何优雅地查看 JS 错误堆栈？作者：小芭乐Fundebug经授权转载，版权归原作者所有。在前端，我们经常会通过 window.onerror 事件来捕获未处理的异常。假设捕获了一个异常，上报的堆栈是这个：TypeError这个堆栈，你看得出问题来吗？我们发布到 CDN 的脚本文件，普遍是经过 UglifyJS 压缩的，所以堆栈可读性相当的差。假如有下面的一个堆栈查看工具，又如何？眼尖的同学...
source map 你知道多少？-- 调试、原理、渗透、还原源码
李刚的学习专栏
05-22 3853
压缩 css 和 javascript 代码，是一种简单且见效明显的的提高 web 性能的方式。但是，当需要调试这些压缩文件中的代码时变成了“噩梦”。source map 是解决该问题的方式之一，其提供了一种将压缩文件中的代码映射回源文件中的原始位置的方法。 Chrome 和 Firefox 开发人员工具都附带了对 source map 的内置支持，这意味着，即使在压缩后，也可以轻松地调试应用程序。 注意： Firefox：开发人员工具默认启用对源地图的支持； Chrome：手动启用支持。启动Chrome
js压缩代码后怎么生成source map_利用SourceMap还原前端代码
weixin_39719749的博客
11-27 1851
0x00 写在前面最近做渗透测试过程中，在通过HTML源代码中的js找接口的时候发现可以通过浏览器调试功能的源代码处能够直接看到前端Vue具体的代码。然后再网上查了查，找到一个工具(restore-source-tree)可以直接通过SourceMap 将前端代码还原到本地。0x01 安装 restore-source-treegit clone https://gi...
转载：挖洞思路：前端源码泄露漏洞并用source map文件还原
HRay's blog
01-21 2262
大部分Vue应用会使用webpack进行打包，如果没有正确配置，就会导致Vue源码泄露，可能泄露的各种信息如API、加密算法、管理员邮箱、内部功能等等。
sentry——sourceMap解析错误解决
riddle1981的博客
09-22 1962
在local的22.8版本sourcemap执行正常，在远端的22.5版本，sourcemap解析异常。发现并无差异，这里推测是22.5到22.8升级时做了更合理化的解析。经过验证为框架内路径与线上路径映射问题，最终解决方案路径为更名。至于为什么本地可以解析远端不可以，在对比相关配置后。至此，sentry就可以正确寻址到对应源框架了。这时sourceMap解析可以正常解析。经过cli工具分析得到错误如下。这里尝试修改源文件的映射地址。可以看到这里的url地址是。完整的解决方案分为两种。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值