PageSpy 是货拉拉开发的一款可以远程调试前端页面、小程序的工具。在调试端,你可以像操作 chrome 控制台一样很方便的查看 console 输出、网络请求、本地存储、SEESION/COOKIE。基本上 PageSpy 的调试端相当于一个 chrome 控制台,只不过他可以让你本地调试任何远程的客户端。

关于 PageSpy 在前端远程调试利器 PageSpy 更详细的介绍。

image.png

理论上 PageSpy 能力还是很强大的,为了保证方案更好的落地,我们希望在解决我们主要痛点的同时,接入成本要尽可能的简单。

我们准备用 PageSpy 做线上偶发性异常调试,在前端开发中经常会遇到自己测试没问题,但是客户那边有问题。这种问题调试起来往往都会比较繁琐。

通过 PageSpy 可以轻松的看到客户那边的报错信息,可以更方便有效的进行问题的定位。

为了方便管理和排查,我们做了如下参数约定:

# title 作为调试端房间列表显示的标识
# project 为所接入项目的标识
new PageSpy({title: 'user01', project: 'test'})

房间列表

此外 PageSpy 的引入也是动态加载的,我们在页面的某个位置加入触发机制,当客户出现问题时,我们会告知客户触发加载 PageSpy 复现 Bug, 这时我们的前端工程师就可以在房间列表中查看客户那边的具体报错,辅助前端工程师解决问题。

我们可以看到 PageSpy 还有日志回放的功能。如果引入这个能力,客户只需要加载出 PageSpy ,并触发 Bug 点击上传日志即可。前端工程师可以根据客户上传的日志,通过日志回放看到具体的报错。这样就把问题的反馈变成了异步的形式,无需前端工程师和客户都在线。

PageSpy 日志回放,目前只支持 WEB 端,我们业务主要以小程序为主,且可以比较方便的找到客户帮忙排查问题,因此并没有使用这个功能。