发表于 2024年10月11日1年前 前言 推荐一款多端的开源调试工具 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 能够帮助到大家！
前言
推荐一款多端的开源调试工具 PageSpy ，官方地址：https://pagespy.org 。
这款工具可以拿来做什么？如何使用？
接下来的内容会一一说明，你也可以前往官网的回放实验室体验：https://pagespy.org/#/replay-lab 。
介绍
日常开发中，项目出现问题基本都会通过 本地浏览器控制台 排查。可有些时候因为无法使用控制台，而导致排查故障需要多花费很多时间和人力，比如：
真机调试 H5：以往有产品提供了可以在 H5 上查看信息的面板，但真机屏幕太小操作不便、显示不友好，以及数据会被截断；
远程办公、异地协同：传统沟通方式如邮件、电话、视频等，沟通问题的周期长、效率不高、故障信息不全面，容易误解误判；
用户设备白屏：除了需要提前获知出现问题的用户信息，定位问题的方式包括查看数据监控、日志分析，甚至还要跑到客户现场等，这些方式依赖排障人员要理解业务场景、技术实现；
全局的 "问题反馈" 组件
点击查看示例图：问题反馈表单组件。
大多注重用户体验的网站，会在产品端为用户提供反馈问题的表单组件。从用户的角度这确实会提升好感，但用户提交的内容对于排查问题的帮助可能并不大，根本原因是：用户提交的基本上是文字概述和截图，或许还包含用户信息，但开发者更希望看到的是：
上述场景中列举的问题的共同点是：开发者无法像使用本地控制台一样查看程序运行信息。
你也被这些问题困扰了吗？那 PageSpy 可以给你一些帮助。
能力
为了方便理解，我们通过实例对 PageSpy 的使用场景和能力进行说明。
PageSpy 在线实时调试
产品联调期间，测试人员上报问题后，开发者通过 「 PageSpy 在线实时调试」 查看程序的运行数据，其中包括实时的
Console 、Network 、Page 、Storage以及 System 信息，还可以发送代码到真机上执行；PageSpy 日志回放调试
假设你开发的工厂系统已经上线、交付使用，某日系统使用人员反馈某个流程不符合预期，但是由于办公地点不同你们只能线上交流。
系统接入 PageSpy 之前，定位问题可能需要对方提供：
系统接入 PageSpy 之后，收到类似的反馈只需告诉对方 上传日志 即可。（不用担心！上传 / 下载离线日志的功能 PageSpy 都已经提供。）
对方上传完成后就可以前往回放调试，开发者除了可以看到运行时数据外，还可以看到用户的操作轨迹。
深入
PageSpy 组成
PageSpy 主要由三个模块部分组成：
使用
首先是考虑用户隐私和数据安全、其次为了方便大家使用，PageSpy 打包了上面的三个部分，提供一键启动、开箱即用的多种部署方案，你可以根据自己的情况选择部署方案。
使用 Docker 部署
使用 Node 部署
启动完成后，打开浏览器访问
http://localhost:6752体验，本地测试完成后即可部署到服务器上。最后
PageSpy 在 Web / 小程序 / ReactNative / OpenHarmony 平台上都已经有稳定的 SDK ，希望 PageSpy 能够帮助到大家！