PageSpy 是由货拉拉一款用来远程调试的工具。可以让你像操作本地 chrome 控制台一样，调试远程页面代码。 PageSpy SDK 支持如下：

Repo	Type	Status
`page-spy-types`	Common types	Done
`page-spy-browser`	Web sdk	Done
`page-spy-wechat`	Wechat sdk	Done
`page-spy-alipay`	Alipay sdk	Done
`page-spy-uniapp`	uniApp sdk	Done
`page-spy-taro`	Taro sdk	WIP
`page-spy-rn`	React Native sdk	WIP

PageSpy 存在两个端:

调试端: 用于开发者查看调试信息
客户端：客户端用于搜集异常数据传输到调试端。

PageSpy 应用场景如下：

远程工作场景下，测试人员反馈程序问题，只需要开启 PageSpy 重现问题步骤，开发者就可以看到具体的报错原因，避免了很多的沟通。
线上一些兼容性问题，可以帮用户开启 PageSpy ，可以快速定位到问题。

PageSpy 模块间的依赖关系和交互示意图：

调试端示意图控制台：

网络请求：存储:

调试端安装

Docker

docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest

Node

yarn global add @huolala-tech/page-spy-api@latest

# if you use npm

npm install -g @huolala-tech/page-spy-api@latest

调试端配置

Nginx 配置

将 PageSpy 作为一个完整项目部署：

server {
    listen 443 ssl;
    server_name www.domain.com;

    if ($scheme != https) {
        rewrite ^(.*)$  https://$host$1 permanent;
    }

    ssl_certificate /etc/letsencrypt/live/www.domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/www.domain.com/privkey.pem;

    location / {
        proxy_pass http://127.0.0.1:6752;
        proxy_http_version    1.1;
        proxy_set_header      Upgrade $http_upgrade;
        proxy_set_header      Connection "upgrade";
    }
}

server {
    if ($host = www.domain.com) {
        return 301 https://$host$request_uri;
    }

    listen 80;
    listen [::]:80;
    server_name www.domain.com;
    return 404;
}

将 PageSpy 作为一个已有项目的子目录配置

server {
    # ...

    location ~/<sub-path>/  {
        # the <sub-path> is same as above
        rewrite ^/<sub-path>/(.*)$ /$1 break;
        proxy_pass            http://127.0.0.1:6752;
        proxy_http_version    1.1;
        proxy_set_header      Upgrade $http_upgrade;
        proxy_set_header      Connection "upgrade";
        proxy_set_header      Host $host;
        proxy_set_header      X-Real-IP $remote_addr;
        proxy_set_header      X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # the <sub-path> is same as above
    location /<sub-path> {
        return 301 $scheme://$host$request_uri/;
    }
}

PageSpy 默认调试端是没有身份验证的，如果你想对调试端增加身份验证可以进行如下配置

首先通过 htpasswd 生成账密文件：

# 执行后会要求输入密码、二次确认密码
htpasswd -c /etc/nginx/.htpasswd <用户名>;

server {
    location / {
        auth_basic "请输入用户名和密码以访问 PageSpy 服务";
        auth_basic_user_file /etc/nginx/.htpasswd;

        proxy_pass http://127.0.0.1:6752;
        proxy_http_version    1.1;
        proxy_set_header      Upgrade $http_upgrade;
        proxy_set_header      Connection "upgrade";
    }

    location ~ /(api|page-spy) {
        proxy_pass http://127.0.0.1:6752;
        proxy_http_version    1.1;
        proxy_set_header      Upgrade $http_upgrade;
        proxy_set_header      Connection "upgrade";
    }
}

Nginx 配置文件修改后，记得重启 Nginx 服务

客户端引入 PageSpy

调试端部署好后，可以输入域名打开 PageSpy ，页面顶部接入 SDK 可以看到 PageSpy 具体引入方式。

Vue 3 引入

在 App. Vue 加入下面代码, 记得安装 '@huolala-tech/page-spy-browser

<script setup lang="ts">
import { onMounted } from 'vue'
import PageSpy from '@huolala-tech/page-spy-browser'
onMounted(() => {
  window.$pageSpy = new PageSpy({title:"user01",project:"test",api:"domain/pageSpy",clientOrigin:"https://domain/pageSpy"})

})
</script>

New PageSpy 参数说明:

window.$pageSpy = new PageSpy({
    // SDK 会从引入的路径自动分析并决定 Server 的地址（api）和调试端的地址（clientOrigin）
    // 假设你从 https://example.com/page-spy/index.min.js 引入，那么 SDK 会在内部设置：
    //   - api: "example.com"
    //   - clientOrigin: "https://example.com"
    // 如果你的服务部署在别处，就需要在这里手动指定去覆盖。
    api: "",
    clientOrigin: "", // 仅适用浏览器环境的 SDK

    // project 作为信息的一种聚合，可以在调试端房间列表进行搜索
    project: "default",

    // title 供用户提供自定义参数，可以用于区分当前调试的客户端
    // 对应的信息显示在每个调试连接面板的「设备id」下方
    title: "--",

    // 指示 SDK 初始化完成，是否自动在客户端左下角渲染「圆形白底带 Logo」的控件
    // 如果设置为 false, 可以调用 window.$pageSpy.render() 手动渲染
    autoRender: true,  // 仅适用浏览器环境的 SDK

    // 手动指定 PageSpy 服务的 scheme。
    // 这在 SDK 无法正确分析出 scheme 可以使用，例如 PageSpy 的浏览器插件
    // 是通过 chrome-extension://xxx/sdk/index.min.js 引入 SDK，这会
    // 被 SDK 解析成无效的 "chrome-extension://" 并回退到 ["http://", "ws://"]。
    //   - （默认）传值 undefined 或者 null：SDK 会自动分析；
    //   - 传递 boolean 值：
    //     - true：SDK 将通过 ["https://", "wss://"] 访问 PageSpy 服务
    //     - false：SDK 将通过 ["http://", "ws://"] 访问 PageSpy 服务
    enableSSL: null
})

客户端引入 SDK 后，启动客户端，就可以再调试端的房间列表里看到客户端的相关信息 enjoy~。

如果你对 PageSpy 有疑问可以参考【常见问题解答】基本可以解决你大多数的疑问，如果你想和我探讨关于 PageSpy 可以在下方留言。

References

HuolalaTech/page-spy-web: Debug remotely and easily like chrome devtools. (github.com)

🐞 常见问题解答 · HuolalaTech/page-spy-web Wiki (github.com)

调试端安装#

Docker#

Node#

调试端配置#

Nginx 配置#

客户端引入 PageSpy#

Vue 3 引入#

References#