PageSpy 是一款用于远程Web项目调试的开源工具。它基于对原生API的封装,将调用原生方法时的参数进行过滤、转化,整理成格式规范的消息供调试端消费;调试端收到消息数据,提供类控制台可交互式的功能界面将数据呈现出来。
PageSpy 官网地址:https://www.pagespy.org/
PageSpy GitHub地址:https://github.com/HuolalaTech/page-spy-web
PageSpy 可以帮助开发人员和测试人员在远程环境中实时查看和调试Web项目。它支持以下功能:
PageSpy 适用于以下场景:
PageSpy 的使用方法如下:
1. 在被调试的Web项目中引入PageSpy的SDK。
PageSpy 提供了各个主流浏览器的SDK,可以根据需要选择使用。例如,在 Chrome 中引入 SDK 的步骤如下:
// 引入 PageSpy 的 SDK
import { PageSpy } from "pagespy";
// 在浏览器启动时初始化 PageSpy
window.addEventListener("load", () => {
const pageSpy = new PageSpy();
// 设置调试端的地址
pageSpy.setHost("localhost:8080");
});
2. 在调试端启动PageSpy。
PageSpy 提供了一个 Web 应用程序,可以直接在浏览器中启动。例如,在启动 PageSpy 时指定调试端的地址如下:
// 启动 PageSpy
new PageSpy({
host: "localhost:8080",
});
3. 在被调试的Web项目中指定调试端的地址。
在被调试的Web项目中,需要指定调试端的地址。例如,在 Chrome 中指定调试端的地址如下:
// 指定调试端的地址
window.localStorage.setItem("pagespy.host", "localhost:8080");
PageSpy 的注意事项:
PageSpy 的未来发展
PageSpy 目前仍在开发中,未来将会增加以下功能: