使用 PageSpy 增强开发体验,解锁更多调试可能性

64 天前
 blucas01

前言

👋 大家好,我是 Blucas 。

今天向大家推荐由我们团队开源维护的一款多平台调试工具 PageSpy ,官方地址: https://pagespy.org

PageSpy 做了什么?为什么需要 PageSpy ?接下来的内容会一一说明。

介绍

Devtools 在日常开发中是必不可少的帮手,项目出现问题总是第一时间借助 Devtools 排查。可总有些时候「无法使用 Devtools ,因此而导致排查故障需要花费很多时间和人力」,这就是 PageSpy 想去解决的问题。

在正式介绍之前,为了确认 PageSpy 正是你所需要的,看看下面的场景你是否遇到过:

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

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

PageSpy 能力

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

PageSpy 在线实时调试

Blucas 在本地开发 H5 ,真机调试期间通过「 PageSpy 在线调试」查看程序的运行数据,其中包括实时的 Console 、Network 、Page 、Storage 以及 System 信息,还可以发送代码到真机上执行;

PageSpy 离线回放调试

Blucas 开发的营销系统交由 Tancy 所在团队使用。某日 Tancy 反馈系统里某个流程不符合预期,由于两人办公地点不同只能通过线上交流。

营销系统接入 PageSpy 之前,Blucas 定位问题需要 Tancy 提供:

营销系统接入 PageSpy 之后,当收到 Tancy 的反馈时,Blucas 告诉她点击「上传离线日志」按钮即可。不用担心,上传 / 下载离线日志的功能 PageSpy 都已经提供。

通过离线日志 Blucas 除了可以看到「 PageSpy 在线实时调试」提到的数据外,还可以看到 Tancy 的操作轨迹。

深入

PageSpy 组成

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
    # 或者
    npm install -g @huolala-tech/page-spy-api@latest
    
    # 接着
    page-spy-api
    

启动完成后,打开浏览器访问 http://localhost:6752 体验,本地测试完成后即可部署到服务器上。

总结

当前在 Web / 小程序 / ReactNative / OpenHarmony 上都已经有稳定的 SDK ;衷心的希望能够帮助到大家。大家喜欢的话,还麻烦大家给仓库点个 Star ,先感谢了!

1568 次点击
所在节点    分享创造
1 条回复
teenthsch
63 天前
好东西,我们用了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1070382

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX