PageSpy 开启远程调试新篇章

为了及时响应社区反馈，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 希望能够得到大家的多多支持！