告别抓瞎式调试:PageSpy，你的远程调试新利器
在移动互联网时代，前端开发早已不再是简单的在本地浏览器中点点鼠标。各种H5页面、小程序，甚至鸿蒙应用，都可能成为你的战场。当用户反馈问题，而你却无法像在本地一样轻松调试时，是否感觉像在黑暗中摸索？别担心，今天就为大家介绍一款开源神器——PageSpy，它能让你如同拥有“千里眼”，轻松搞定远程调试。
一、PageSpy：一体化远程调试工具
PageSpy，顾名思义，就像一个“页面间谍”，潜伏在你的应用中，实时监控并反馈各种信息。它是由货拉拉技术团队开源的一款强大的远程调试工具，集成了类似Chrome DevTools的功能，让你在远程调试时也能享受本地调试的便利。
1. 为什么需要PageSpy？
传统的远程调试方式往往繁琐，例如需要连接数据线、安装各种调试工具，甚至在某些情况下根本无法进行调试。PageSpy的出现，正是为了解决这些痛点。它能让你：
- 轻松调试H5或WebView应用：无需复杂的配置，即可远程调试移动端页面。
- 高效的远程协作：团队成员可以跨地域协作，共同解决问题。
- 快速定位用户问题：当用户反馈白屏等问题时，可以迅速定位并解决。
2. PageSpy的核心功能
PageSpy的核心功能是“远程检查运行时”，它提供了开箱即用的SDK和调试客户端。只需简单几步，你的应用就能实现“透明化”。
二、PageSpy的使用方法
1. 部署方式
PageSpy提供了两种主要的部署方式，你可以根据自己的需求选择：
(1) Node部署
如果你熟悉Node.js，可以使用以下命令进行部署：
yarn global add @huolala-tech/page-spy-api@latest
# 如果你使用npm
npm install -g @huolala-tech/page-spy-api@latest
然后运行 page-spy-api，访问 http://localhost:6752 即可。
(2) Docker部署
如果你更喜欢使用Docker，可以使用以下命令进行部署：
docker run -d --restart=always -v ./log:/app/log -v ./data:/app/data -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest
然后访问 http://localhost:6752 即可。
2. 如何使用
使用PageSpy非常简单，只需三步：
- 加载SDK文件：在你的HTML文件中引入PageSpy的SDK。
- <script crossorigin="anonymous" src="https://{domain}/page-spy/index.min.js"></script>
- 配置并初始化：在你的代码中初始化PageSpy。
- <script> new PageSpy(); </script>
- 完成！：现在你就可以在PageSpy的客户端中看到你的应用了。