React Native 版本的 PageSpy 使用教程

工作原理

部署

# 请注意镜像的 tag 是 feat-rn-rebase

docker pull ghcr.io/huolalatech/page-spy-web:feat-rn-rebase

docker run -dp 6752:6752 --name="pageSpy" --restart=always ghcr.io/huolalatech/page-spy-web:feat-rn-rebase

以上操作会在 6752 端口上启动 PageSpy 的服务，如果你是在本地运行上面的命令，可以在浏览器中打开 http://localhost:6752 查看。

此时 PageSpy 的调试端和服务端就准备完毕：

• 调试端：开发者用来查看客户端运行信息；
• 服务端：连接调试端和客户端，转发两者之间交互的消息；

接下来需要在项目中引入 SDK @huolala-tech/page-spy-react-native。

引入 SDK

SDK 主页：https://www.npmjs.com/package/@huolala-tech/page-spy-react-native

1. 在项目中安装 SDK

yarn add @huolala-tech/page-spy-react-native@dev

2. 初始化 SDK：

import PageSpy from '@huolala/page-spy-react-native';

new PageSpy({
  // PageSpy 服务的 host
  // 假设服务部署在 https://example.com 则填写 "example.com"
  api: '<your-pagespy-server-host>',

  // PageSpy 部署的服务是否 https 访问，默认为 true
  enableSSL: true,

  project: "<填写项目名称, 可以搜索>",
  title: "<自定义内容，可以搜索>"
})

3. 引入成功后重新运行项目

4. 前往调试端筛选出待调试的终端，左边的表单可以过滤搜索

5. 点击 “调试” 按钮，即可看到 APP 的运行信息。

技术支持群