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)