PageSpy 开启远程调试新篇章

[blucas01]

为了及时响应社区反馈，PageSpy 建立了技术支持群，群内提供了视频讲解资料供大家学习、快速上手，欢迎大家入群交流。

往期内容：

• 第一章：《支持远程调试的 “vConsole”》
• 第二章：《有了 vConsole ，为什么我们还要做 PageSpy 》

大背景

对于国内的前端开发者而言，vConsole 几近做到了无人不知、无人不晓的地步；无论是开发 H5 还是小程序，大家都不可或缺的会在项目中集成。在开发 PageSpy 之前，作者本人亦是如此。

在前几章的介绍中，各位看官也能够浅探到我们在内部去做 PageSpy 这款产品的初衷、以及当下开源的故事。

所以在接下来，我会接着前几章的内容继续讲述：在 vConsole 占领前端调试领域半边天的背景下，「PageSpy 如何破局」，做到敌无我有、敌有我强！

契机！

至于为什么开发 PageSpy 的背景，在前面的章节中我们已经交代过，简而言之就是：开发和测试在不同的城市，项目提测后出现问题，如果你想依赖：

1. 测试小姐姐上报故障描述
2. 测试小姐姐把 vConsole 截图发过来

这些实践都是 沟通成本并不低、同时相当不靠谱 的，作者已经替你们试过了。

究其原因：测试小姐姐对程序代码的逻辑是两眼一抹黑；而开发想要确认的千奇百怪的故障却始终要依赖测试小姐姐们来 “中转” 信息。

破局

本着开发者 “自己动手、丰衣足食” 的精神，我们开发了一个闭环的产品来承担部分测试环节的工作量，PageSpy 由三部分组成：

• PageSpy Web 调试端：由开发者使用；一个类似控制台的、交互友好的、实时同步数据的前端界面；
• PageSpy API 服务端：调试端和 SDK 的 “中间人”。负责中转两端之间的通信消息；
• PageSpy SDK：由开发者在业务项目中集成，集成后通过实例化即可收集客户端的运行信息，通过 Server API 将消息转发到调试端，开发者即可对项目的运行状况一目了然。

对于以上三个部分，PageSpy 合三为一，提供了一键使用的支持，各位开发者无需关心内部实现细节，可以直接上手集成，点击查看详情。

在有了 PageSpy 后，开发者和测试人员之间的协同可以大效率提升，这里主要体现在：

• 减少测试人员的心智负担：测试只需要简单描述故障信息、操作步骤，让开发者了解基本情况；
• 降低不同职能岗位协同的沟通成本：PageSpy 以类似 Chrome 控制台的形式还原程序的运行现场信息，只要报错信息在我开发者面前，任他妖魔鬼怪，95% 的问题都可以束手就擒；

OK ，通过这里简单的阐述，如果你之前使用过 vConsole ，或许已经 Get 到 PageSpy 和它最大的不同：PageSpy 内置服务端通信模块，支持远程调试！

功能领先

除了支持远程调试这个场景之外，PageSpy 同样是从产品功能的多样性上碾压对手。

具体来说：

1. 使用场景：同样支持 H5 远程调试；

1. 日志面板：对于同样的输入，vConsole 的输出略微有点瑕疵；

1. 日志面板：当发生报错时，PageSpy 支持定位到源码；

1. 网络面板：大体积的响应数据，PageSpy 支持懒加载、vConsole 则是直接截断；

1. 网络面板：对于不同媒体类型的响应数据，PageSpy 的处理方式符合开发者的第一直觉；

1. 系统分析：对于项目所运行的环境信息，PageSpy 会分析客户端系统、浏览器和版本，以及对纳入 ES 规范的 API 做出兼容性判断，开发者则是能够一目了然；

使用成本

在了解了功能和使用场景层面的差异后，剩下的就是看谁更简单、易用。

在使用成本上，PageSpy 丝毫不逊色，只需要两步即可上手使用：

1. 引入 SDK 文件；
2. 实例化。

你没看错，就是这么简单。PageSpy 将复杂性封装在自身内部，提供一键部署成功的特性，同时又开放了可选的配置参数供用户定制它的表现行为（默认参数适用于绝大多数场景）。

结语

vConsole 是一款很实用的产品，切实的为大家在调试 H5 的场景带来了诸多便捷，但可能由于产品设计限制，致使上文的诸多不变；

在拓展了调试的适用场景、丰富产品功能多样性和优化功能的稳定性后，PageSpy 继承 “前辈” 的开源精神，向社区贡献自己的一份力量，PageSpy 希望能够得到大家的多多支持！

[jhdxr]

我还真没听说过 vConsole 。。。是因为不做小程序用不上，还是我落后版本太多了？

[blucas01]

@jhdxr 开发中后台的话的确用不上，vConsole 的场景适用于小程序和 H5 开发，PageSpy 进一步支持远程调试，方便异地协同。

[dcdlove]

你们做得非常好，之前体验过，我们测试小姐姐非常喜欢，但是我们是做外包的，前端没有什么话语权，线上项目，集成做了一个动态加载 这个 sdk 和初始化 可是我们没有资源部署一份带 ssl 服务端所以无法在生产环境使用，如果你们能提供一个公用的服务端就好了，之前钉钉的远程调试提供过类似的 sdk

[blucas01]

@dcdlove 😄 非常感谢你对 PageSpy 的认可。一个公用的服务虽然带来了便捷性，但是也存在数据安全风险；然后针对你说的这个情况，其实我们先下载一个「花生壳」 APP ，接着在本地启动 PageSpy 服务，然后用花生壳提供的功能实现本地服务的在线访问（它提供 https 支持），可以试试哦

[blucas01]

@dcdlove 如果不知道具体的实施细节，欢迎加入技术支持群细聊 😊

[z4zr]

支持支持

[blucas01]

@z4zr 非常感谢你的认可，期待后续的使用反馈 😊

[manhere]

vconsole 是古董了吧...现在都是 eruda

[blucas01]

@manhere 😊

[chanChristin]

这个是要部署在服务器上吗，还是安装在项目内部？我看安装方法是要全局 npm

[blucas01]

@chanChristin 需要部署服务。npm 安装是其中一种方式，还提供了 docker 镜像。可以先看一下视频快速入门： https://space.bilibili.com/3493272492181886 😄

[chanChristin]

@blucas01 #11 要部署在服务器上就麻烦一点了，公司内部想往服务器上部署东西还要找运维，如果项目内的话还可以自己发测试环境看看效果。

[blucas01]

@chanChristin 可以参考四楼的回复，本地服务在线访问

[TMaize]

支持支持

[blucas01]

@TMaize 谢谢 😊

[xppgg]

前一段时间已经部署到公司服务器了，是我今年见到的非常好的一个开源项目，感谢开源

[blucas01]

@xupapagg 非常感谢认可，友情提示：注意做好数据安全的保护措施哦 😊

[alleluya]

歪个楼 vconsole 现在 vue3 可以用了吗? 我记得 3.0 刚出不久的时候 vconsole 调试有问题 后来改用 eruda 不过我觉得 eruda 其实没有 vconsole 好用...

[blucas01]

@alleluya 可以用的哦，支持当下流行的所有框架 😊，这里可以在线体验 https://github.com/HuolalaTech/page-spy-web/wiki/%F0%9F%90%9E-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E7%AD%94#3-%E5%A6%82%E4%BD%95%E5%9C%A8-xxx-%E6%A1%86%E6%9E%B6%E4%B8%AD%E9%9B%86%E6%88%90

[alleluya]

@blucas01 你们这个看着不错的 下回做 H5 的时候试试 😊

[blucas01]

@alleluya 哈哈，好滴。期待你的后续使用反馈，遇到任何问题，可以加入技术支持群细聊 🤝

[SingeeKing]

现在流行「推广」不发网址吗，遇到好多通篇看上去没找到一个入口的……

https://huolalatech.github.io/page-spy-web/

[blucas01]

@SingeeKing 其实文中有仓库链接，亮色模式下超链的样式不是很显眼，暗色模式下要好些。不过还是很感谢 ❤️

[GuryYu]

@blucas01
docker 版的镜像能发布到 DockerHub 吗，公司内只对 DockerHub 有镜像加速，其他的源就很慢甚至打不开

[blucas01]

@GuryYu 可以使用 NPM Package 哈，也超级方便 😊 这个是视频介绍： https://www.bilibili.com/video/BV1oM4y1p7Le/?vd_source=6b4fed1a463f67c0e8e56eaa21faa997

[jucelin]

我通过 npm install -g @huolala-tech/page-spy-api 安装的，首页错乱，好像缺少 css
我在页面上加载了 page-spy/index.min.js ，出现了图标，但 PC 上点图标没反应，移动端点了就显示了 Device ID 等信息的对话框，没有 vConsole 的面板

[blucas01]

@jucelin 对照视频本地排查一下呢： https://www.bilibili.com/video/BV1oM4y1p7Le/?spm_id_from=333.999.0.0