跳转到内容
彼岸论坛
欢迎抵达彼岸 彼岸花开 此处谁在 -彼岸论坛

[分享创造] 一文带你了解 PageSpy,开启前端调试新姿势


小天管理

已推荐帖子

前言

推荐一款多端的开源调试工具 PageSpy ,官方地址:https://pagespy.org

这款工具可以拿来做什么?如何使用?

接下来的内容会一一说明,你也可以前往官网的回放实验室体验:https://pagespy.org/#/replay-lab

介绍

日常开发中,项目出现问题基本都会通过 本地浏览器控制台 排查。可有些时候因为无法使用控制台,而导致排查故障需要多花费很多时间和人力,比如:

  • 真机调试 H5:以往有产品提供了可以在 H5 上查看信息的面板,但真机屏幕太小操作不便、显示不友好,以及数据会被截断;

  • 远程办公、异地协同:传统沟通方式如邮件、电话、视频等,沟通问题的周期长、效率不高、故障信息不全面,容易误解误判;

  • 用户设备白屏:除了需要提前获知出现问题的用户信息,定位问题的方式包括查看数据监控、日志分析,甚至还要跑到客户现场等,这些方式依赖排障人员要理解业务场景、技术实现;

  • 全局的 "问题反馈" 组件

    点击查看示例图:问题反馈表单组件

    大多注重用户体验的网站,会在产品端为用户提供反馈问题的表单组件。从用户的角度这确实会提升好感,但用户提交的内容对于排查问题的帮助可能并不大,根本原因是:用户提交的基本上是文字概述和截图,或许还包含用户信息,但开发者更希望看到的是:

    • 用户是如何操作的;
    • 伴随着操作,程序的运行时行为数据。例如:打印的日志、发出的网络请求以及响应数据等;

上述场景中列举的问题的共同点是:开发者无法像使用本地控制台一样查看程序运行信息。

shapes at 24-10-09 14.46.35.png

你也被这些问题困扰了吗?那 PageSpy 可以给你一些帮助。

能力

为了方便理解,我们通过实例对 PageSpy 的使用场景和能力进行说明。

PageSpy 在线实时调试

产品联调期间,测试人员上报问题后,开发者通过 「 PageSpy 在线实时调试」 查看程序的运行数据,其中包括实时的 Console 、Network 、Page 、Storage 以及 System 信息,还可以发送代码到真机上执行;

shapes at 24-10-09 15.15.14.png

shapes at 24-10-09 15.28.17.png

PageSpy 日志回放调试

假设你开发的工厂系统已经上线、交付使用,某日系统使用人员反馈某个流程不符合预期,但是由于办公地点不同你们只能线上交流。

系统接入 PageSpy 之前,定位问题可能需要对方提供:

  • 问题的现象说明;
  • 在不同流程状态下的截图;
  • 控制台面板的信息(这是有很高门槛的): 如 Console 面板的日志、Network 面板的数据;
  • 等等……

系统接入 PageSpy 之后,收到类似的反馈只需告诉对方 上传日志 即可。(不用担心!上传 / 下载离线日志的功能 PageSpy 都已经提供。)

shapes at 24-10-10 10.08.55.png

对方上传完成后就可以前往回放调试,开发者除了可以看到运行时数据外,还可以看到用户的操作轨迹。

replay-page-a1f617cc.gif

深入

PageSpy 组成

PageSpy 主要由三个模块部分组成:

系统模块示意图 (2)

使用

首先是考虑用户隐私和数据安全、其次为了方便大家使用,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 能够帮助到大家!

意见的链接
分享到其他网站

加入讨论

您现在可以发表并稍后注册. 如果您是会员,请现在登录来参与讨论.

游客
回复主题...

×   粘贴为富文本.   粘贴为纯文本来代替

  只允许使用75个表情符号.

×   您的链接已自动嵌入.   显示为链接来代替

×   您之前的内容已恢复.   清除编辑器

×   您无法直接粘贴图片.要从网址上传或插入图片.

  • 游客注册

    游客注册

  • 会员

    没有会员可显示

  • 最新的状态更新

    没有最新的状态更新
  • 最近查看

    • 没有会员查看此页面.
×
×
  • 创建新的...