前端调试利器——pageSpy的使用简易指南

1.先部署pageSpy到自有服务器（推荐部署到自有服务器）

三种方式（node部署、docker部署、宝塔面板部署）

具体参考官网pagespy.huolala.cn/#/

免部署使用方式（生产环境下不推荐）

pagespy.huolala.cn/#/o-spy

xml 复制代码

<script src="https://static.huolala.cn/libs/o-spy/2.2.9/index.min.js" crossorigin="anonymous"></script>

<script>
  const $oSpy = new OSpy();
</script>

2.前端页面/框架中集成pageSpy sdk

cdn方式

安装

xml 复制代码

<!-- PageSpy SDK -->
<script crossorigin="anonymous" src="https://<your-pagespy-host>/page-spy/index.min.js"></script>

<!-- 插件（非必须，但建议使用） -->
<script crossorigin="anonymous" src="https://<your-pagespy-host>/plugin/data-harbor/index.min.js"></script>
<script crossorigin="anonymous" src="https://<your-pagespy-host>/plugin/rrweb/index.min.js"></script>

集成与初始化

ini 复制代码

<script>
  window.$harbor = new DataHarborPlugin();
  window.$rrweb = new RRWebPlugin();

  [window.$harbor, window.$rrweb].forEach(p => {
    PageSpy.registerPlugin(p)
  })

  window.$pageSpy = new PageSpy();
</script>

ESM方式引入

安装

kotlin 复制代码

yarn add @huolala-tech/page-spy-browser @huolala-tech/page-spy-plugin-data-harbor @huolala-tech/page-spy-plugin-rrweb

集成与初始化

javascript 复制代码

import PageSpy from "@huolala-tech/page-spy-browser";
import DataHarborPlugin from "@huolala-tech/page-spy-plugin-data-harbor";
import RRWebPlugin from "@huolala-tech/page-spy-plugin-rrweb";

window.$harbor = new DataHarborPlugin();
window.$rrweb = new RRWebPlugin();

[window.$harbor, window.$rrweb].forEach((p) => {
  PageSpy.registerPlugin(p);
});
// ESM 模式下无法自动分析部署地址，因此必须手动配置以下参数
window.$pageSpy = new PageSpy({
  api: "xx.xx.xx.xx:6752",//部署pageSpy的服务器地址（只需要主机+端口）
  clientOrigin: "http://xx.xx.xx.xx:6752",//（完整的地址）
  enableSSL: false,
  // 不渲染图标
  autoRender: false,
});

// 监听页面连续点击5次及以上时候渲染pageSpy图标
window.addEventListener("click", (e) => {
  if (e.detail >= 5) {
    window.$pageSpy.render();
  }
});

3.开始调试

前端项目运行起来后连续点击页面五次开启调试，页面会显示pageSpy标，点击跳转即可

后续功能直接在跳转的界面上实时调试

4.测试一下

ini 复制代码

控制台输入：
document.body.style.backgroundColor = "red";
document.body.style.color = "white";

观察页面样式变化