这是一个创建于 554 天前的主题，其中的信息可能已经有所发展或是发生改变。
接上回 《支持远程调试的 "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 等方式的部署方案，一键部署、一劳永逸，使用起来非常简单。
有问题大家可以加入 技术支持群。
第 1 条附言 · 16 天前
第 2 条附言 · 16 天前
🎉 现在 PageSpy 支持调试的平台有：Web / 小程序 / ReactNative / 鸿蒙 App ，欢迎大家使用「你肯定能用上的远程调试平台」
 |
1
vaporSpace 2023-12-01 10:03:22 +08:00
Good ！真的很方便，群满了，方便拉一下吗
|
 |
2
blucas01 OP @vaporSpace 可以啊，你的微信号是？
|
|
3
vaporSpace 2023-12-01 10:07:08 +08:00
@blucas01 bWFueXVlZ3VqaW4=
|
|
4
blucas01 OP @vaporSpace 申请已发送
|
 |
5
Hilong 2023-12-01 10:27:54 +08:00
感觉有点意思哦。可以针对性的调试到特定机器吗？比如测试的手机
|
 |
7
Gaoti 2023-12-01 10:45:16 +08:00
能定位到源码，是要开 sourceMap ？
|
 |
9
kamilic 2023-12-01 14:37:40 +08:00
超级加强版的 chii 呀，666 。
以前也有开过脑洞，能不能把 chii 部署到远端然后整个团队共享使用。 |
 |
11
9ki 2023-12-01 15:29:39 +08:00
很久以前我也想过把 sentry + eruda 结合起来, 没想到居然有人已经实现了, 而且看起来还很好用, 关注一下
|
 |
13
JenJieJu 2023-12-01 18:37:08 +08:00
RN 支持吗？
|
 |
15
kingofzihua 2023-12-08 09:53:43 +08:00
和 sentry 啥区别？
|
|
16
blucas01 OP @kingofzihua sentry 是事后分析，PageSpy 是实时调试。
|
 |
17
xiaojun996 2023-12-28 10:44:49 +08:00
看起来不错，顶一下🆙
|
 |
18
sdrpsps 2023-12-28 10:57:27 +08:00
试用了一下，很不错。如果能自定义图标大小位置就更好了😁
|
 |
19
jiakeshan 2023-12-28 17:54:17 +08:00
Good ！真的很方便，群满了，方便拉一下吗？ vv: enNoeGppYWtlbGFvMTIz
|
|
20
blucas01 OP |
|
21
blucas01 OP #13 现已支持
|
 |
22
soar0712 16 天前
为啥我这边打开官网链接是 godaddy 的停放页，是我网络问题还是解析问题啊
|
|
24
blucas01 OP |
 |
25
Baymaxbowen 16 天前
支持报错时自动上传报错数据吗
|
 |
26
TimPeake 16 天前
有点 sentry 的意思了？
|
|
27
TimPeake 16 天前
你们官方域名不对吧
 |
|
28
blucas01 OP @Baymaxbowen 提供手动上传的 API ，在什么时机调用需要开发者决定
|
 |
29
xieqiqiang00 16 天前 via Android
好多年前我给自己的网站还搞过这个功能，刚开始写前端很菜，网站老崩溃，就把所以能记录的全记录了传回服务器，奔溃一次记录有好几兆
|
|
31
TimPeake 16 天前
跑个 demo 试了下， 两个字：牛皮。
|
|
32
blucas01 OP |
|
33
blucas01 OP @xieqiqiang00 PageSpy 值得让你一试
|
 |
35
itning 16 天前
angular support ？
|
|
37
Baymaxbowen 16 天前
@blucas01 #28 还有个小问题。比如我想知道是哪个用户使用的，是否支持开发者在特定时机修改设备的 title 名称
|
|
38
blucas01 OP @itning sure, see: https://www.pagespy.org/#/docs/faq#framework
|
|
39
blucas01 OP @Baymaxbowen #37 Yes ，看这个： https://www.pagespy.org/#/docs/faq#update-info
|
 |
40
puzzle9 16 天前
啊 突然挖坟啦 原来之前就已经用过啦 很棒
|
 |
41
guaike 16 天前
帖子中图片加载不出来
|
 |
43
seth19960929 16 天前
试过, 好用
|
|
45
blucas01 OP @seth19960929 有眼光
 （感谢支持 |
 |
46
LancerXu 15 天前
很强大的功能，方便易用已 star
想咨询个问题本地上传的日志到后台回放时报错“auth.login_required”，是需要配置什么登录信息吗 |
 |
47
hexiaowu1993 15 天前
还有群交流的？
|
|
48
blucas01 OP |
 |
49
wuxi889 15 天前
原来是货拉拉
|
Select Language