【第2951期】PageSpy：一个适用于远程 Web 项目调试的工具

前言

所提使用场景正中下怀。今日前端早读课文章由 @Blucas 投稿，公号：货拉拉技术授权。

正文从这开始～～

PageSpy 是一个适用于远程 Web 项目调试的工具。

基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化， 整理成格式规范的消息供调试端消费；调试端收到消息数据，提供类控制台可交互式的功能界面将数据呈现出来。

Github 地址：https://github.com/HuolalaTech/page-spy-web

与其他工具比较

1. vConsole

由腾讯前端团队开源的专门为移动端 Web 开发所设计的前端调试面板工具，产品界面简洁，具有集成简单、易于使用的特点。

但是只支持本地调试，跨地区合作时测试人员依旧需要通过截图等方式提供故障信息，对技术人员而言会出现沟通效率和误解误判等情况。

2. remotejs.com

支持会话形式在线调试，技术人员可以主动的在远程进行代码调试，集成和使用都比较简单。

其调试面板只支持查看基本类型的数据和对象字面量；记录了日志输出和网络请求的行为，但其中网络请求的详细数据无法查看；报错不展示堆栈详情等等，整体而言提供的功能比较粗糙。且只支持通过公网访问，数据安全无法保障。

何时使用？

任何无法在本地使用控制台调试的场景，都是 PageSpy 可以大显身手的时候 ！一起来看下面的两个例子：

节省沟通成本，提升协同效率：在现代远程工作和跨地区合作变得越来越普遍的背景下，技术人员和测试人员之间的有效协同变得异常重要。然而， 传统的沟通方式如邮件、电话、视频会议等存在沟通效率不高、故障信息不全面、误解误判等。PageSpy 提供项目运行现场供技术人员在调试端查看，测试人员不用再频繁 的通过文字、截图、录屏等方式向技术人员提供故障信息。

精准高效排障，避免大海捞针：当应用在用户的终端上出现白屏或其他类似致命问题时，快速定位、精准排障并修复问题一直是技术人员面临的难题。传统定位问题的方式包括数据监控、日志分析等，这些方式不仅会耗费大量的时间和精力来分析和诊断问题，还依赖排障人员理解业务需求场景、技术实现。PageSpy 将 错误信息直接呈现给技术人员，排除一切信息干扰，show the code!

如何使用？

为了数据安全和方便您的使用，我们提供完整的、开箱即用的容器化部署方案，用户可自行在本地部署，或者作为公共服务在内网进行部署。

本地化部署完成后，页面顶部会出现 接入 SDK 菜单，点击菜单即可查看接入流程。如下图所示：

功能概览

Console 面板

显示 console.<log | info | warn | error> 日志信息，同时还可以发送调试代码；

Network 面板

显示 fetch | XMLHttpRequest | navigator.sendBeacon 的网络请求；

Page 面板

显示当前页面，查看 HTML 节点树；

Storage 面板

查看 localStorage | sessionStorage | cookie 缓存数据；

System 面板

显示 userAgent 信息，查看 api 兼容性；

以上所有面板都支持数据的实时更新，或者当有新的数据变化也会收到提示通知。

关于本文
作者：@货拉拉大前端
原文：https://mp.weixin.qq.com/s/xCNDlxoOAzz6Z2wdm3dp_Q

这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。