有了 vConsole,我们为什么还要做 PageSpy
接上回 《支持远程调试的 "vConsole"》 发出后,大家对此挺感兴趣,所以咱这回接着唠。
起初在开发 PageSpy 的时候,我们是想着解决 vConsole 做不到的事情,也就是远程调试的工作协同:开发人员在上海,测试、产品等团队在深圳。
那时候是这样的啊,项目白屏了、程序报错了、接口 Error 了,完事儿让测试人员对着 vConsole 截图,人家怎么知道截啥图、截哪个面板的图?具体来说,打个比方:js 里通过 res.data.users.map(fn) 去遍历用户渲染,但是由于种种原因,接口返回的数据长这样式儿的:
{
"success": true,
"message": "请求成功",
"data": null
}
测试人员在 vConsole 看到的、最直观的也就是以下 "报红" 错误信息:
Uncaught TypeError: Cannot read properties of null (reading 'users')
at <压缩后的.js>:3:10010
当测试小姐姐把这个错误截图发过来的时候,对开发人员排障有什么帮助吗?有的!我们从中可以得知:
读取的是某个对象的 users 属性;
是在 <压缩后的.js> 第 3 行、第 10010 列处发生的问题;
信息量够吗?单独针对于这个场景,勉强可以接受,虽然 .users 的关键词搜索结果很多,但因为我们可以去扒 <压缩后的.js> 文件,耐心的定位到错误堆栈的具体报错位置,再结合我们自身对这个项目源代码的熟悉、理解,有经验的同学还是能够找到问题所在的,但是大家等我说完这一大串也能感受到,整个排查的过程下来会很累。。。
那如果客户端报错的现场不是在测试小姐姐那边、是在我们本地谷歌浏览器的话,排障的流程又会是什么样子的呢?
发现 Console 面板报错,堆栈中有源码索引;
点击后会定位到源文件的原始行列;
初步确认数据有问题后,切换到 Network 面板,查看接口返回的数据;
确认问题。
相比上面的 "盲人摸象",本地的排障非常的自然、顺畅。
正因如此,PageSpy 本着向控制台看齐的初衷,基本还原了控制台排障的流程:
当程序报错时支持可以查看错误堆栈
支持定位源码
查看网络请求和响应数据
除了上面提到的这些功能外,我们在 PageSpy 的应用截图中也可以看到其他的信息:
左上角自动识别了当前客户端的系统、浏览器,当鼠标划过时还会显示更加具体的版本详情;
中间顶部显示着当前调试连接的在线状态;
侧边栏按钮中得知可以查看日志输出、网络请求、页面渲染状况、缓存信息、系统信息(这是什么?);
当开发者直面这些数据的时候,大多数问题将迎刃而解。今天我们先分享到这里,大家如果感兴趣的话,可以查看 官网文档,官方提供了 Docker / Node 等方式的部署方案,一键部署、一劳永逸,使用起来非常简单。
有问题大家可以加入 技术支持群。
- 官网: pagespy.org
GitHub: github.com/HuolalaTech/page-spy-web/
🎉 现在 PageSpy 支持调试的平台有:Web / 小程序 / ReactNative / 鸿蒙 App ,欢迎大家使用「你肯定能用上的远程调试平台」
Good !真的很方便,群满了,方便拉一下吗
可以啊,你的微信号是?
bWFueXVlZ3VqaW4=
申请已发送
感觉有点意思哦。可以针对性的调试到特定机器吗?比如测试的手机
已经有方案了,欢迎加入群组织细聊 😄
能定位到源码,是要开 sourceMap ?
对的 ❤️
超级加强版的 chii 呀,666 。
以前也有开过脑洞,能不能把 chii 部署到远端然后整个团队共享使用。😁 非常期待你的后续使用反馈哦,也可以先加入微信支持群,遇到问题第一时间支持
很久以前我也想过把 sentry + eruda 结合起来, 没想到居然有人已经实现了, 而且看起来还很好用, 关注一下
感谢支持 ❤️
RN 支持吗?
不支持原生哦
和 sentry 啥区别?
sentry 是事后分析,PageSpy 是实时调试。
看起来不错,顶一下🆙
试用了一下,很不错。如果能自定义图标大小位置就更好了😁
Good !真的很方便,群满了,方便拉一下吗? vv: enNoeGppYWtlbGFvMTIz
群二维码已更新 public-assets-v.huolala.cn/images/page-spy-wechat-group.jpg
#13 现已支持
为啥我这边打开官网链接是 godaddy 的停放页,是我网络问题还是解析问题啊
不好意思……才看到这是个老帖子,不知道为啥这会儿给我订到头部了
#22 帖子虽老内容不老 ,可以访问完整路径: www.pagespy.org 或者国内官网镜像 pagespy.huolala.cn
支持报错时自动上传报错数据吗
有点 sentry 的意思了?
你们官方域名不对吧
提供手动上传的 API ,在什么时机调用需要开发者决定
好多年前我给自己的网站还搞过这个功能,刚开始写前端很菜,网站老崩溃,就把所以能记录的全记录了传回服务器,奔溃一次记录有好几兆
#26 不吹不黑,支持的场景比 sentry 更多、也更实在
跑个 demo 试了下, 两个字:牛皮。
#27 正在看,可以先访问完整路径: www.pagespy.org 或者国内官网镜像 pagespy.huolala.cn
PageSpy 值得让你一试
#31 嘎嘎一嘎子
angular support ?
#34 顺便说你, 你们的那个在线 demo 快被玩儿坏了, 我似乎看到不少隐私信息
#28 还有个小问题。比如我想知道是哪个用户使用的,是否支持开发者在特定时机修改设备的 title 名称
sure, see: www.pagespy.org/#/docs/faq#framework
#37 Yes ,看这个: www.pagespy.org/#/docs/faq#update-info
啊 突然挖坟啦 原来之前就已经用过啦 很棒
帖子中图片加载不出来
试过, 好用
可能是你的网络问题
有眼光 (感谢支持
很强大的功能,方便易用已 star
想咨询个问题本地上传的日志到后台回放时报错“auth.login_required”,是需要配置什么登录信息吗还有群交流的?
public-assets-v.huolala.cn/images/page-spy-wechat-group.svg 必须滴
原来是货拉拉
越写越烦躁,要兼顾性能,要兼顾语法,还要考虑优雅。。。很多小场景明明知道直接操作 dom 来的又快又准,又不敢瞎搞。 --- 很多小场景明明知道直接操作 dom 来的又快又…
我自己是有加家庭组 iCloud ,但是以前用安卓的照片嫌麻烦没有导,都是存 Google photo 里了,安卓 iOS 照片全同步还挺方便的。去年今年土区一涨再涨,这次更是…
结果是一千多个连续的大写 A 请问有没遇到相同情况的? 你倒是把原字符串发出来呀 base64 是转码又不是摘要,用程序多搞几个 A 转回去看一下是什么字符不就行了? 这…