想快速了解 PageSpy 是什么、如何使用？
PageSpy 为各位同学精心专门准备了入门视频，视频中介绍了使用 PageSpy 的背景、如何使用、多种部署方案等，请前往 Bilibili 观看学习。
实例化都可以传哪些参数，它们的作用分别是什么？
// 所有参数都是可选的，以下是各个参数的说明及其默认值
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: "",
// project 作为信息的一种聚合，可以在调试端房间列表进行搜索
project: "default",
// title 供用户提供自定义参数，可以用于区分当前调试的客户端
// 对应的信息显示在每个调试连接面板的「设备id」下方
title: "--",
// 指示 SDK 初始化完成，是否自动在客户端左下角渲染「圆形白底带 Logo」的控件
// 如果设置为 false, 可以调用 window.$pageSpy.render() 手动渲染
autoRender: true,
// 手动指定 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
})
如何在 xxx 框架中集成？
PageSpy 借助 CodeSandbox 平台发布了与当下流行的所有框架的接入指南，大家可以前往在线体验juejin.cn/post/730190…
pagespy.jikejishu.com 是官方提供的域名吗？一直可以用吗？
pagespy.jikejishu.com 是我们为了让大家能够在线体验、学习 PageSpy 临时搭建的服务，不保证 24 小时可用性、不保证数据安全、造成的损失自负，强烈建议大家在体验后前往私服、内网中自行部署。
为什么本地 6752 端口可以访问，部署到服务器上就不行了？
检查服务器上的防火墙、或者安全组规则是否开放了 6752 端口。
想直接通过域名访问该怎么配置？
这里贴出 https://pagespy.jikejishu.com 的 nginx 配置供大家参考：
server {
listen 443 ssl;
server_name pagespy.jikejishu.com;
if ($scheme != https) {
rewrite ^(.*)$ https://$host$1 permanent;
}
ssl_certificate /etc/letsencrypt/live/pagespy.jikejishu.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/pagespy.jikejishu.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 = pagespy.jikejishu.com) {
return 301 https://$host$request_uri;
}
listen 80;
listen [::]:80;
server_name pagespy.jikejishu.com;
return 404;
}
不想在项目里手动集成，有没有办法可以不侵入业务项目代码？
PageSpy 为大家准备了浏览器插件，插件提供了以下特性：
- 自动注入最新版本的 SDK；
- 自动完成实例化操作；
- 提供注入的域名配置规则；
点击前往使用：HuolalaTech/page-spy-extension
有油猴脚本可以使用吗？
参考以下内容：
// ==UserScript==
// @name Inject PageSpy Script
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Inject script on xxx.yyy
// @author You
// @match <匹配规则，比如 example.com>
// @grant none
// ==/UserScript==
(function() {
'use strict';
var script1 = document.createElement('script');
script1.setAttribute('crossorigin', 'anonymous');
// 实际项目中请替换 SDK 的地址连接
script1.src = 'https://pagespy.jikejishu.com/page-spy/index.min.js';
var script2 = document.createElement('script');
script2.textContent = 'window.$pageSpy = new PageSpy();';
document.head.prepend(script1);
script1.onload = () => {
document.head.appendChild(script2);
}
})();
业务项目部署在 HTTPS，PageSpy 部署在 HTTP，控制台报错怎么办？
浏览器会阻止从 HTTPS 站点加载 HTTP 资源，这是因为在 HTTP 和 HTTPS 之间传输数据时，HTTPS 提供了加密和安全性，而 HTTP 则是明文传输，存在安全风险。
建议大家直接将 PageSpy 升级到 HTTPS 服务，就可以完美解决。
如何单独对某个用户进行调试？
最简单的方案是让用户使用 PageSpy 的浏览器插件，适用于非常配合的客户且是 PC 端项目的时候，但这个前提条件肉眼可见的非常苛刻；
那么如果 H5 项目上生产了想使用 PageSpy 该怎么办？对所有用户都开启这显然不现实。
大家可以想想 PageSpy 的生效过程总共就两个步骤：
head标签中通过<script>引入 SDK；- 实例化；
PageSpy 在第二步实例化之前，引入的 <script> 对项目不会产生任何作用。我们想针对某个用户进行调试，关键在第二步：在哪个用户的终端上实例化 PageSpy。对此有两种方案：
- 动态响应 HTML：如果用户在请求 HTML 时，我们可以拿到用户的唯一标识、并且可以对 HTML 动态注入，那么就可以在向用户返回 HTML 之前决定是否注入
<script>和实例化的逻辑； - 让用户使用手势开启（计划中）：这通常需要用户的主动配合。默认情况下注入 SDK 但不实例化，让用户触发特殊手势后再开启调试；
友情提示：除了技术上的实现之外，需要注意合法合规等安全风险。
Page 面板的样式不正确？
Page 面板是将客户端的 document.documentElement.outerHTML 渲染到 iframe 中。
由于客户端和调试端的渲染环境并不一致，例如：客户端的浏览器版本是 Chrome 75，调试端的浏览器版本是 Chrome 120。所以样式仅供参考。
Page 面板就不能 100% 还原客户端的内容吗？
SDK 可以对页面进行 “截图” 并发送到调试端，但由于：
- 图片比文本的数据体积大，数据交互会增加网络传输开销；
- 增加 SDK 的体积和复杂度；
- 如果是「样式出错」，远程协同时测试人员可以精准的反馈给开发者；
出于以上原因，Page 面板的样式仅供参考。
