敌无我有，敌有我强

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

此文为《PageSpy 专栏》第三章，有兴趣的小伙伴可以前往专栏查看往期内容。

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

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

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

（ps："开源的东西真有这么好用，我又为何受这般苦难"

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

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

究其原因：初级测试不知道 vConsole，中级测试不知道程序本身逻辑，高级测试不知道业务依赖上下文；而开发想要确认的千奇百怪的故障却始终要依赖测试小姐姐们来 "中转" 信息。

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

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

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

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

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

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

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

具体来说：

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

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

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

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

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

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