PageSpy 开启远程调试新篇章
为了及时响应社区反馈，PageSpy 建立了技术支持群，群内提供了视频讲解资料供大家学习、快速上手，欢迎大家入群交流。
大背景
对于国内的前端开发者而言，vConsole 几近做到了无人不知、无人不晓的地步；无论是开发 H5 还是小程序，大家都不可或缺的会在项目中集成。在开发 PageSpy 之前，作者本人亦是如此。
在前几章的介绍中，各位看官也能够浅探到我们在内部去做 PageSpy 这款产品的初衷、以及当下开源的故事。
所以在接下来，我会接着前几章的内容继续讲述：在 vConsole 占领前端调试领域半边天的背景下，「PageSpy 如何破局」，做到敌无我有、敌有我强！
契机！
至于为什么开发 PageSpy 的背景，在前面的章节中我们已经交代过，简而言之就是：开发和测试在不同的城市，项目提测后出现问题，如果你想依赖：
- 测试小姐姐上报故障描述
- 测试小姐姐把 vConsole 截图发过来
这些实践都是 沟通成本并不低、同时相当不靠谱 的，作者已经替你们试过了。
究其原因：测试小姐姐对程序代码的逻辑是两眼一抹黑；而开发想要确认的千奇百怪的故障却始终要依赖测试小姐姐们来 “中转” 信息。
破局
本着开发者 “自己动手、丰衣足食” 的精神，我们开发了一个闭环的产品来承担部分测试环节的工作量，PageSpy 由三部分组成：
- PageSpy Web 调试端：由开发者使用；一个类似控制台的、交互友好的、实时同步数据的前端界面；
- PageSpy API 服务端：调试端和 SDK 的 “中间人”。负责中转两端之间的通信消息；
- PageSpy SDK：由开发者在业务项目中集成，集成后通过实例化即可收集客户端的运行信息，通过 Server API 将消息转发到调试端，开发者即可对项目的运行状况一目了然。
对于以上三个部分，PageSpy 合三为一，提供了一键使用的支持，各位开发者无需关心内部实现细节，可以直接上手集成，点击查看详情。
在有了 PageSpy 后，开发者和测试人员之间的协同可以大效率提升，这里主要体现在：
- 减少测试人员的心智负担：测试只需要简单描述故障信息、操作步骤，让开发者了解基本情况；
- 降低不同职能岗位协同的沟通成本：PageSpy 以类似 Chrome 控制台的形式还原程序的运行现场信息，只要报错信息在我开发者面前，任他妖魔鬼怪，95% 的问题都可以束手就擒；
OK，通过这里简单的阐述，如果你之前使用过 vConsole，或许已经 Get 到 PageSpy 和它最大的不同：PageSpy 内置服务端通信模块，支持远程调试！
功能领先
除了支持远程调试这个场景之外，PageSpy 同样是从产品功能的多样性上碾压对手。
具体来说：
- 使用场景：同样支持 H5 远程调试；
- 日志面板：对于同样的输入，vConsole 的输出略微有点瑕疵；
- 日志面板：当发生报错时，PageSpy 支持定位到源码；
- 网络面板：大体积的响应数据，PageSpy 支持懒加载、vConsole 则是直接截断；
- 网络面板：对于不同媒体类型的响应数据，PageSpy 的处理方式符合开发者的第一直觉；
- 系统分析：对于项目所运行的环境信息，PageSpy 会分析客户端系统、浏览器和版本，以及对纳入 ES 规范的 API 做出兼容性判断，开发者则是能够一目了然；
使用成本
在了解了功能和使用场景层面的差异后，剩下的就是看谁更简单、易用。
在使用成本上，PageSpy 丝毫不逊色，只需要两步即可上手使用：
- 引入 SDK 文件；
- 实例化。
你没看错，就是这么简单。PageSpy 将复杂性封装在自身内部，提供一键部署成功的特性，同时又开放了可选的配置参数供用户定制它的表现行为（默认参数适用于绝大多数场景）。
结语
vConsole 是一款很实用的产品，切实的为大家在调试 H5 的场景带来了诸多便捷，但可能由于产品设计限制，致使上文的诸多不变；
在拓展了调试的适用场景、丰富产品功能多样性和优化功能的稳定性后，PageSpy 继承 “前辈” 的开源精神，向社区贡献自己的一份力量，PageSpy 希望能够得到大家的多多支持！