Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Fundebug支持高亮出错代码位置

Fundebug支持高亮出错代码位置

作者头像
Fundebug
发布于 2019-12-31 10:23:14
发布于 2019-12-31 10:23:14
3190
举报
文章被收录于专栏:FundebugFundebug

摘要: 当用户的代码出错时,我们能够捕获出错的代码片段,并且高亮出错的行和列,这样用户可以快速定位出错位置。

接入Fundebug的JavaScript错误监控插件之后,用户就可以第一时间发现线上代码的错误。并且,Fundebug支持使用Source Map还原真正的出错位置,获取出错的代码块:

可知,我们使用黄色和红色分别高亮代码块中出错的行和列。这样,用户一目了然,可以迅速定位出错代码,并找到出错原因。

Source Map按钮关闭时

默认情况下,Source Map按钮是关闭的,此时展示的是压缩代码的出错位置:

这种情况下,是比较难定位出错的源代码位置的,因为压缩代码的变量、函数名称都经过了变换。一个可行的办法是通过出错代码块中的特殊字符串进行搜索,这种方法并不是很好。因此,我们鼓励用户使用Source Map功能。

Source Map按钮开启时

开启Source Map之后,展示的是通过Source Map还原的出错代码:

参考

版权声明

转载时请注明作者 Fundebug以及本文地址:

https://blog.fundebug.com/2017/11/21/fundebug-highlight-error-code/

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-11-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Fundebug微信小程序BUG监控服务支持Source Map
微信小程序在打包时,会将所有 js 代码打包成一个文件,从而减少体积,加快访问速度。
Fundebug
2019/08/26
6160
sourcemap曳光弹 - 通过sourcemap直接将线上错误定位到源代码
本文来自读者Ludwig酱投稿,非著名非典型的Web开发者 信奉简单可依赖的技术价值观,热爱Coding,热爱写作 掘金地址: https://juejin.cn/post/7342279484488728626
zz_jesse
2024/03/26
1K0
sourcemap曳光弹 - 通过sourcemap直接将线上错误定位到源代码
实践 | 脚本错误量极致优化-让脚本错误一目了然
作者|joeyguo 原文|https://github.com/joeyguo/blog/issues/14 在上篇《脚本错误量极致优化-监控上报与Script error》 中,主要提到了js脚本错误上报的方式,并讲解了如何使用 crossorigin 来解决 Script error 报错信息的方案,于是我们就可以查看到脚本报错信息了。而此时可能会遇到另一个问题:”JS 代码压缩后,定位具体出错代码困难!“。本篇《脚本错误量极致优化-让脚本错误一目了然》 将结合示例,通过多种解决方案逐一分析,让脚本错
用户1097444
2022/06/29
7430
实践 | 脚本错误量极致优化-让脚本错误一目了然
Fundebug支持区分Source Map版本
摘要: 想要区分Source Map版本的话,在接入插件与上传Source Map时,都需要设置appversion哦!
Fundebug
2019/12/31
5740
Fundebug新增JavaScript Sourcemap即时转换功能
压缩代码的错误的位置信息(文件,行号和列号)已经失真,开发者很难定位源代码的位置。而且,压缩代码的变量以及函数名称都会进行变换,这也增加了开发者 Debug 的难度。
Fundebug
2023/10/23
1730
Fundebug新增JavaScript Sourcemap即时转换功能
Fundebug完成小目标:整它1个亿!
摘要: 到今年双11,Fundebug已经上线1周年啦!现在,我们累计处理了1亿条错误事件。小目标完成,此处应该打Call!
Fundebug
2019/12/31
3410
Fundebug JavaScript插件支持监控HTTP请求数据
Fundebug提供专业的前端异常监控服务,我们的插件可以提供全方位的异常监控,可以帮助开发者第一时间定位各种前端异常,包括但不限于 JavaScript 执行错误以及 HTTP 请求错误。
Fundebug
2023/10/23
2150
Fundebug JavaScript插件支持监控HTTP请求数据
Source Map入门教程
部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度。然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真。这时就需要Source Map来还原真实的出错位置了。
Fundebug
2018/09/17
1.3K0
Source Map入门教程
Fundebug录屏插件更新至0.5.0,新增domain参数
Fundebug提供专业的异常监控服务,当线上应用出现 BUG 的时候,我们可以第一时间报警,帮助开发者及时发现 BUG,提高 Debug 效率。在网页端,我们通过原创的录屏技术,可以 100%还原 BUG 出现之前用户的操作流程,帮助开发者快速复现出错场景。点击查看演示视频。
Fundebug
2019/07/25
8520
Fundebug前端异常监控插件更新至2.0.0,全面支持TypeScript
Fundebug提供专业的前端异常监控服务,我们的插件可以提供全方位的异常监控,可以帮助开发者第一时间定位各种前端异常,包括但不限于JavaScript执行错误以及HTTP请求错误。
Fundebug
2019/09/05
8920
使用Fundebug API 批量上传Source Map
Fundebug 支持使用 Source Map 还原真正的错误位置。这样的话,开发者能够迅速定位出错的源代码。另外,Fundebug 还能够展示出错的代码块,帮助开发者更快地解决问题。
Fundebug
2020/03/03
9390
谷歌都在用的监控软件,到底长什么样
大家好,我是7small7,一位混迹互联网多年的IT民工。今天来给大家分享一个世界互联网大厂都在用的软件(Fun Debug)。
兔云小新LM
2022/11/21
8870
谷歌都在用的监控软件,到底长什么样
黑科技!Fundebug支持可视化重现出错场景
摘要: Fundebug一直专注于提高Debug效率! 各位老铁,你们在解决bug的时候,是否有过这样的困扰: bug严不严重,要不要立即修复? 用户有没有受到影响,是否影响使用? 到底是如何触发这个bug的? 很多前端的bug,比如WeixinJSBridge is not defined,JQuery is not defined,Script error.。它们到底有没有影响到用户,除非是用户主动反馈,否则我们不得而知。另一方面,研究表明Debug的绝大部分时间是花在bug复现(reproduce)。
Fundebug
2018/06/28
4980
Typecho文章代码高亮功能
Typecho是一款由国人开发的博客程序,它的特点是简洁小巧,扩展性强,并且内置支持Markdown语法写作,因而很受技术博客作者的欢迎。但是默认的Typecho没有自带语法高亮,要实现语法高亮就要使用Typecho相应的插件,而Typecho的插件安装和调试都比较难,这里就将介绍一种不使用插件来实现几乎所有语言的语法高亮的方法。
HCG_Sky
2020/07/24
3.7K0
Typecho文章代码高亮功能
第38篇:Checkmarx代码审计/代码检测工具的使用教程(1)
Checkmarx是以色列研发的一款代码审计工具,是.NET开发的,只能在Windows下使用。很多人喜欢把它和fortify进行比较,其实很难说两款工具孰优孰劣,各有秋千吧,两款工具配合起来互补一下更好。Checkmarx和Fortify一样,是商业版的,没有免费版。就我本人实战使用的经验来看,对于有些高危漏洞,有时候Fortify能扫出来,有时候Checkmarx能扫出来,没法评判哪个工具更厉害。Checkmarx的使用教程网上很少,我看了它的说明书,说明书写得有点复杂,我写一个简单的教程方便大家上手吧。
ABC_123
2023/02/24
4.2K1
第38篇:Checkmarx代码审计/代码检测工具的使用教程(1)
通用代码高亮插件(SyntaxHighlighter)
首先,我要说SyntaxHighlighter插件的实现方式及应用示例,然后再说明如何将其应用到自己的博客,使博客的代码着色更加美观。
全栈程序员站长
2022/11/15
2.8K0
前端录屏 + 定位源码,帮你快速定位线上 bug
web-see[1] 前端监控方案,提供了 前端录屏+定位源码 方式,让bug无处藏身
前端老道
2023/02/27
1.6K0
前端录屏 + 定位源码,帮你快速定位线上 bug
听GPT 讲Rust源代码--src/tools(5)
在Rust源代码中,lower.rs文件位于Rust Analyzer项目的hir-ty子库中,其目的是将高级中间表示(HIR)降低为中间表示(MIR)。下面对文件及其组件进行详细介绍:
fliter
2023/12/04
2890
听GPT 讲Rust源代码--src/tools(5)
支持 Markdown 语法和代码高亮
为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书写我们的博文。Markdown 是一种 HTML 文本标记语言,只要遵循它约定的语法格式,Markdown 的渲染器就能够把我们写的文章转换为标准的 HTML 文档,从而让我们的文章呈现更加丰富的格式,例如标题、列表、代码块等等 HTML 元素。由于 Markdown 语法简单直观,不用超过 5 分钟就可以掌握常用的标记语法,因此大家青睐使用 Markdown 书写 HTML 文档。下面让我们的博客也支持使用 Markdo
追梦人物
2018/04/17
2.8K0
支持 Markdown 语法和代码高亮
深入浅出 Source Map
通俗的来说, Source Map 就是一个信息文件,里面存储了代码打包转换后的位置信息,实质是一个 json 描述文件,维护了打包前后的代码映射关系。关于 Source Map 的解释可以看下 Introduction to JavaScript Source Maps[7]。
zz_jesse
2023/09/11
5980
深入浅出 Source Map
推荐阅读
相关推荐
Fundebug微信小程序BUG监控服务支持Source Map
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档