1、为啥要使用远程调试，vConsole不香吗

移动端屏幕小，操作不方便

手机屏幕小，复制链接，查看请求，查看dom，复制数据，输入命令等这些调试操作都会造成很大的困难

远程办公协同难度大

如果出现问题的设备不在开发者旁边，还需要远程指导对方进行调试，这个沟通成本可想而知

白屏咋整

如果因为页面报错而导致白屏，那么vconsole这种本地调试工具也难以展示出来，又怎么进行排查呢

我的手机为啥给你看

隐私是个大问题，万一你看我微信，翻我相册咋整

2、PageSPY简介

PageSpy 是一款用来调试 Web / 小程序 / 鸿蒙 App 等平台项目的工具。基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成格式规范的消息供调试端消费；调试端收到消息数据，提供类控制台可交互式的功能界面将数据呈现出来。

官网文档

3、安装

PageSPY提供了node和docker两种安装方式，可以按需选择具体请参考安装文档

4、集成到项目中

安装完成后你将得到一个地址，类似于：http://localhost:6572 打开这个地址，里面就有详细的介绍文档以及如何接入

1. 在测试项目中加载一个

<script crossorigin="anonymous" src="http://localhost:6572/page-spy/index.min.js"></script>

2. 初始化pageSPY

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

5、写个Hook吧

上述这种集成方式会在打开页面时，默认创建pageSPY，然后通过websocket上报页面数据，这不是我们想要的，因为没有区分环境，也没有区分用户

/**
 * 使用@huolala-tech/page-spy-browser进行远程调试
 */
import { useScriptTag } from '@vueuse/core'
interface SpyOptions {
    host?: string; //JS地址
    autoRender?: boolean; // 是否自动渲染，默认否
    project?: string; // project 作为信息的一种聚合，可以在调试端房间列表进行搜索
    title?: string; // title 供用户提供自定义参数，可以用于区分当前调试的客户端
}
export const useSpy = (opt?: SpyOptions) => {
    const {
        host = 'http://localhost:6572/page-spy/index.min.js',
        autoRender = false,
        project,
        title
    } = opt || {}
    useScriptTag(host, (el) => {
        console.log('el: ', el);
        // 创建spy实例
        window.$pageSpy = new window.PageSpy({ autoRender, project, title });
    }, {
        crossOrigin: 'anonymous'
    })
}

6、优雅调试

现在你只需要先做好条件判断，然后使用useSpy就可以优雅的接入远程调试了。这里我们假设通过url上是否带有特定参数为例：

const autoSpy = getParams(location.href, '__debug')
console.log('autoSpy: ', autoSpy);
if (autoSpy === '1') {
   console.log('start useSpy');
   useSpy({ title: 'user name', project: 'my-project' })
}