市场部网
市场人职业服务平台，提供知识培训、异业合作与营销资源对接。
核心定位
PageSpy 是一个面向 Web 项目的远程调试工具，解决的是开发者在真机环境、异地设备或第三方环境中难以复现和定位问题的痛点。它不以侵入业务代码的方式工作，而是通过注入一段轻量脚本，将运行时的调试信息实时同步到调试端。
适用场景
以下场景中，PageSpy 的价值尤为明显：
- 移动端真机调试：摆脱桌面端 DevTools 模拟器的局限，直接观察手机浏览器或 WebView 中的真实运行状态。
- 远程协作排查：测试人员或客户遇到问题时，开发者无需拿到设备，即可远程查看控制台、网络请求和页面状态。
- 生产环境诊断：在不中断用户操作的前提下，捕获特定会话中的异常上下文。
核心能力
| 能力模块 | 说明 |
|---|---|
| 控制台同步 | 实时转发 console 日志、报错堆栈及警告信息 |
| 网络监控 | 捕获页面发出的请求与响应，支持状态码、耗时、载荷查看 |
| 页面快照 | 查看当前 DOM 结构、存储数据（localStorage/sessionStorage）及元素样式 |
| 执行指令 | 在远程页面上执行 JavaScript 表达式，用于验证修复假设 |
接入方式
基本流程如下：
- 在调试端启动 PageSpy 服务（支持自托管或使用官方托管实例）。
- 在目标页面中引入 PageSpy SDK，并配置服务地址。
- 页面加载后，调试端即可看到对应的调试会话。
SDK 支持通过 <script> 标签直接引入，也提供 npm 包供工程化项目集成。对于 Vue、React 等框架项目，通常只需在入口文件处完成一次初始化。
与现有工具的差异
相较于浏览器内置的 DevTools，PageSpy 的核心差异在于调试对象与调试端分离。DevTools 要求调试者与被调试页面处于同一设备、同一浏览器环境；PageSpy 则通过网络将两者解耦。相较于 vConsole 这类页内调试面板，PageSpy 将信息呈现在独立的桌面端界面中，不占用移动端有限的屏幕空间，也便于长会话的记录与检索。
注意事项
- 生产环境接入时，建议通过环境变量或构建配置控制 SDK 的启用范围，避免全量用户均产生调试连接开销。
- 自托管服务需要处理 WebSocket 的转发与安全策略，建议对调试入口增加访问控制。
- 调试会话中包含页面数据与用户行为信息，涉及敏感业务时应评估合规风险。
