4k star 远程调试神器 page-spy-web

本文首发于公众号极客枫哥，日更分享各种好玩的软件、编程知识和个人成长故事

我们在开发移动端应用时，经常会碰到以下几个问题

调试不方便，只能本地调试或者连接 pc adb 模式调试
测试和开发异地办公时，对于一些特定场景的 bug，开发无法复现，不好排查原因
vConsole 能在一定程度上解决问题，但是只能靠日志或者测试同学截图，沟通成本很高，而且有些问题排查起来还是很困难

介绍

page-spy-web是一个多功能的远程调试工具，如果说 vConsole是 1.0 时代的话，那么它的出现，把移动端调试带入了 2.0 时代。

项目地址：github.com/HuolalaTech...

本地部署

全局安装 page-spy-api命令，根据你使用的包管理器自行选择响应的命令执行

perl 复制代码

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

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

# 另外也支持 docker 部署
docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest

启动服务

page-spy-api

启动成功后可以看到服务的 URL，点击打开

项目配置

点击页面顶部的 接入SDK菜单

可以看到有三种不同项目的接入方式，这里我们使用 WEB 项目来接入

在项目的 html 文件中增加如上的代码

xml 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tauri + React + TS</title>
    <script
      crossorigin="anonymous"
      src="http://172.168.20.29:6752/page-spy/index.min.js"
    ></script>
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script>
      window.$pageSpy = new PageSpy();
    </script>
  </body>
</html>

然后启动项目服务，点击 page-spy-api服务顶部的开始调试。因为我最近在学习 tauri 来开发 app，所以就用的是 tauri 的入门 demo 来演示了。