小天管理 发表于 10月11日 Share 发表于 10月11日 前言 推荐一款多端的开源调试工具 PageSpy ,官方地址:https://pagespy.org 。 这款工具可以拿来做什么?如何使用? 接下来的内容会一一说明,你也可以前往官网的回放实验室体验:https://pagespy.org/#/replay-lab 。 介绍 日常开发中,项目出现问题基本都会通过 本地浏览器控制台 排查。可有些时候因为无法使用控制台,而导致排查故障需要多花费很多时间和人力,比如: 真机调试 H5:以往有产品提供了可以在 H5 上查看信息的面板,但真机屏幕太小操作不便、显示不友好,以及数据会被截断; 远程办公、异地协同:传统沟通方式如邮件、电话、视频等,沟通问题的周期长、效率不高、故障信息不全面,容易误解误判; 用户设备白屏:除了需要提前获知出现问题的用户信息,定位问题的方式包括查看数据监控、日志分析,甚至还要跑到客户现场等,这些方式依赖排障人员要理解业务场景、技术实现; 全局的 "问题反馈" 组件 点击查看示例图:问题反馈表单组件。 大多注重用户体验的网站,会在产品端为用户提供反馈问题的表单组件。从用户的角度这确实会提升好感,但用户提交的内容对于排查问题的帮助可能并不大,根本原因是:用户提交的基本上是文字概述和截图,或许还包含用户信息,但开发者更希望看到的是: 用户是如何操作的; 伴随着操作,程序的运行时行为数据。例如:打印的日志、发出的网络请求以及响应数据等; 上述场景中列举的问题的共同点是:开发者无法像使用本地控制台一样查看程序运行信息。 你也被这些问题困扰了吗?那 PageSpy 可以给你一些帮助。 能力 为了方便理解,我们通过实例对 PageSpy 的使用场景和能力进行说明。 PageSpy 在线实时调试 产品联调期间,测试人员上报问题后,开发者通过 「 PageSpy 在线实时调试」 查看程序的运行数据,其中包括实时的 Console 、Network 、Page 、Storage 以及 System 信息,还可以发送代码到真机上执行; PageSpy 日志回放调试 假设你开发的工厂系统已经上线、交付使用,某日系统使用人员反馈某个流程不符合预期,但是由于办公地点不同你们只能线上交流。 系统接入 PageSpy 之前,定位问题可能需要对方提供: 问题的现象说明; 在不同流程状态下的截图; 控制台面板的信息(这是有很高门槛的): 如 Console 面板的日志、Network 面板的数据; 等等…… 系统接入 PageSpy 之后,收到类似的反馈只需告诉对方 上传日志 即可。(不用担心!上传 / 下载离线日志的功能 PageSpy 都已经提供。) 对方上传完成后就可以前往回放调试,开发者除了可以看到运行时数据外,还可以看到用户的操作轨迹。 深入 PageSpy 组成 PageSpy 主要由三个模块部分组成: 在项目中引入的 SDK ,源代码在 HuolalaTech/page-spy 维护; 开发者查看数据的调试端,源代码在 HuolalaTech/page-spy-web 维护; 在 SDK 和调试端之间转发消息的服务端,源代码在 HuolalaTech/page-spy-api 仓库维护; 使用 首先是考虑用户隐私和数据安全、其次为了方便大家使用,PageSpy 打包了上面的三个部分,提供一键启动、开箱即用的多种部署方案,你可以根据自己的情况选择部署方案。 使用 Docker 部署 docker run -d --restart=always -v ./log:/app/log -v ./data:/app/data -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest 使用 Node 部署 yarn global add @huolala-tech/page-spy-api@latest && page-spy-api # 或者 npm install -g @huolala-tech/page-spy-api@latest && page-spy-api 启动完成后,打开浏览器访问 http://localhost:6752 体验,本地测试完成后即可部署到服务器上。 最后 PageSpy 在 Web / 小程序 / ReactNative / OpenHarmony 平台上都已经有稳定的 SDK ,希望 PageSpy 能够帮助到大家! 引用 意见的链接 分享到其他网站 More sharing options...
已推荐帖子
加入讨论
您现在可以发表并稍后注册. 如果您是会员,请现在登录来参与讨论.