做APP开发有哪些基建可以做？完整调试工具集实践指南（以ReactNative为例）

最近在通过RN做一款APP。这一次头一次从0到1用RN做，因此为了实现这些基建，特地去了解了RN底层的架构，以方便快速的了解底层从而搭建出强大的开发工具集。

在 React Native 应用开发中，构建一套完善的开发调试基础设施能够显著提升开发效率、加快问题排查速度，并改善团队协作体验。本文将详细介绍一个实际项目中实现的 14 个核心调试功能模块，涵盖用户管理、日志系统、状态调试、原生通信、UI 组件测试等多个维度。如下图所示：

APP调试工具集先导图

什么是基建？

在软件开发中，"基建"（Infrastructure）指的是支撑应用运行和开发的基础设施和工具集。对于移动应用开发而言，调试基建是一套专门用于开发、测试和问题排查的工具集合，它不直接面向最终用户，但对开发团队至关重要。

调试基建的核心组成

调试基建通常包括但不限于：

日志系统：网络请求日志、应用业务日志、错误日志等
状态管理工具：全局状态查看器、本地存储查看器等
环境管理：多环境切换、配置管理等
性能监控：请求耗时、操作性能等
业务调试工具：用户信息查看、会员信息查看、支付测试等
UI 组件测试：Loading、Toast 等基础组件的演示和测试

这些工具共同构成了一个完整的调试基础设施，为开发团队提供强大的问题排查和验证能力。

为什么要做调试基建？

APP 开发调试的局限性

与 Web 开发相比，移动应用开发在调试方面存在诸多局限性，这使得构建专门的调试基建变得尤为必要：

1. 缺乏浏览器开发者工具

Web 开发的优势：

Chrome DevTools、Firefox DevTools 等强大的浏览器开发者工具
实时查看 DOM 结构、CSS 样式、网络请求
控制台直接执行 JavaScript 代码
断点调试、性能分析、内存分析等

APP 开发的局限：

没有现成的可视化调试工具
无法直接查看原生视图结构
控制台输出需要连接电脑才能查看
断点调试需要额外配置，体验不如浏览器流畅

2. 网络请求调试困难

Web 开发的优势：

浏览器 Network 面板可以查看所有请求
可以直接复制请求为 cURL 命令
请求和响应数据一目了然
支持请求重放和修改

APP 开发的局限：

需要代理工具（如 Charles、Fiddler）才能查看网络请求
配置代理相对复杂，需要证书安装
无法在应用内直接查看请求详情
移动网络环境下调试更加困难

3. 状态和存储调试不便

Web 开发的优势：

浏览器 Application 面板可以查看 LocalStorage、SessionStorage
可以直接修改存储数据
React DevTools 可以查看组件状态和 Props
Redux DevTools 可以查看全局状态变化

APP 开发的局限：

无法直接查看本地存储内容
状态变化需要手动添加 console.log
无法实时查看全局状态
存储数据修改需要重新编译

4. 环境切换成本高

Web 开发的优势：

可以通过 URL 参数或浏览器插件快速切换环境
修改环境变量后刷新页面即可生效
可以同时打开多个环境进行对比

APP 开发的局限：

切换环境需要修改代码或配置文件
需要重新编译打包才能生效
无法在运行时动态切换
多环境测试需要安装多个应用

5. 日志查看不便

Web 开发的优势：

浏览器控制台实时显示日志
可以过滤、搜索日志
日志格式友好，支持对象展开查看

APP 开发的局限：

日志需要连接电脑才能查看
真机调试时日志查看困难
无法持久化保存日志
日志格式不够友好

6. 真机调试困难

Web 开发的优势：

可以在任何设备上通过浏览器访问
远程调试工具（如 Chrome Remote Debugging）功能强大
可以模拟不同设备和网络环境

APP 开发的局限：

真机调试需要 USB 连接或网络配置
调试体验不如模拟器流畅
无法模拟所有真实场景
生产环境问题难以复现

调试基建的价值

基于以上局限性，构建一套完善的调试基建具有以下价值：

提升开发效率：减少重复工作，快速定位问题
改善调试体验：提供类似浏览器开发者工具的功能
降低调试门槛：无需复杂配置即可使用调试功能
支持多环境测试：快速切换环境，无需重新编译
便于问题排查：完整的日志和状态记录，便于追溯问题
支持团队协作：统一的调试工具，降低沟通成本

怎么做调试基建？

设计原则

集中管理：所有调试功能集中在一个页面，方便访问
功能独立：每个功能模块相对独立，可以单独使用
性能可控：通过开关控制功能启用，避免影响生产性能
易于扩展：采用注册机制等设计，便于添加新功能
用户友好：提供搜索、过滤、复制等便捷功能

实现策略

1. 日志系统

存储方案：使用 SQLite 数据库持久化存储日志
记录方式：在关键位置（如 HTTP 请求层）自动拦截和记录
性能优化：异步保存日志，不阻塞主流程
开关控制：提供开关控制日志记录，生产环境可关闭

2. 状态管理工具

注册机制：实现 Store 注册机制，统一管理需要查看的状态
动态获取：运行时动态获取状态，支持实时刷新
可视化展示：递归渲染嵌套结构，支持展开/折叠查看

3. 环境管理

持久化存储：使用 SecureStore 存储环境配置
动态切换：运行时读取配置，动态选择 API 地址
统一管理：通过 Context 统一管理环境状态

4. 原生通信测试

能力检测：自动检测 JSI、TurboModule、NativeModules 等能力
性能测试：提供性能测试工具，对比同步和异步调用
功能测试：测试支付等原生功能是否正常工作

ReactNative（Expo框架）技术选型

存储：SQLite（日志）、SecureStore（敏感信息）、MMKV（高性能存储）
状态管理：Zustand（全局状态）、Context（环境配置）
网络请求：Fetch API + 自定义封装
UI 组件：React Native 基础组件 + 第三方组件库

功能详细介绍

1. 用户信息查看

功能描述：查看当前登录用户的详细信息，包括用户 ID、UUID、昵称、手机号、头像、注册时间等。支持手动设置 Token、同步用户信息、切换账户、管理已保存的账户列表。

技术实现：

使用 Zustand Store (useUserStore) 管理用户状态
通过 expo-secure-store 安全存储 Token
使用 SQLite 数据库存储已保存的账户信息（包括用户信息、Token、环境等）
支持账户切换功能，切换时自动更新环境配置和 Token

核心功能：

显示当前用户基本信息（ID、UUID、昵称、手机号、头像、注册时间）
手动设置 Token 并同步用户信息
查看已保存的账户列表
快速切换账户（自动设置环境、Token 并同步用户信息）
复制 Token 和用户信息
删除已保存的账户

使用场景：

开发阶段快速切换测试账户
验证不同用户角色的功能表现
调试用户相关业务逻辑

2. 会员信息查看

功能描述：查看当前用户的 VIP 会员详细信息，包括会员级别、套餐类型、生效状态、时间信息、资源使用情况等。

信息展示内容：

基本信息：会员名称、会员级别、账户等级、是否生效、套餐类型、套餐周期、价格
时间信息：开始时间、结束时间、过期天数
资源信息：算力使用情况、存储空间、并行任务数、最大并发、训练加速、下载次数
训练会员信息：训练会员级别、开始时间、结束时间
其他信息：团队ID、交易ID、协议状态、套餐ID、是否已获取算力、今日免费算力

使用场景：

验证会员权益是否正确生效
检查资源使用情况
调试会员相关业务逻辑

3. 网络请求日志

功能描述：自动记录所有网络请求的详细信息，包括请求 URL、方法、请求头、请求体、响应状态、响应体、耗时、环境等。支持按 URL 关键词过滤、查看详情、生成 curl 命令、清空日志。

网络日志列表	网络日志详情

技术实现：

在 HTTP 请求封装层拦截所有请求和响应
使用 expo-sqlite 创建本地数据库存储日志
通过 createRequestLogManager 函数创建日志管理器，在请求完成后异步保存
使用 response.clone() 避免响应体被消费后无法读取
支持按 URL 关键词、状态码等条件过滤查询

关键技术栈：

expo-sqlite：SQLite 数据库存储
Fetch API：网络请求拦截
expo-clipboard：复制请求信息

数据库表结构：

复制代码

CREATE TABLE network_logs (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  url TEXT NOT NULL,
  method TEXT,
  request_headers TEXT,
  request_body TEXT,
  response_status INTEGER,
  response_status_text TEXT,
  response_ok INTEGER,
  response_url TEXT,
  response_body TEXT,
  duration INTEGER,
  env TEXT,
  created_at INTEGER NOT NULL
)

核心功能：

自动记录所有 HTTP 请求和响应
按 URL 关键词过滤日志
查看请求详情（请求头、请求体、响应头、响应体）
生成 curl 命令，方便在终端复现请求
清空所有日志
显示请求耗时和环境信息

实现要点：

复制代码

// 创建日志管理器
const logResponse = createRequestLogManager(requestUrl, requestInit);

// 执行请求
const response = await fetch(requestUrl, requestInit);

// 记录日志（异步，不阻塞）
logResponse(response, runtimeEnv);

使用场景：

调试 API 请求问题
分析接口性能
复现线上问题
验证请求参数和响应数据

4. 开关设置

功能描述：控制日志功能的开启/关闭，包括网络请求日志、应用日志、网络请求控制台日志三个开关。

技术实现：

使用 react-native-mmkv 存储开关状态
通过 logSettings 工具类统一管理日志开关
支持实时生效，修改开关后立即清除缓存

开关类型：

网络请求控制台日志：控制是否在控制台输出网络请求和响应的日志信息
网络请求日志：控制是否记录网络请求和响应日志到数据库
应用日志：控制是否记录应用运行时的调试、信息、警告和错误日志到数据库

存储键：

复制代码

const STORAGE_KEYS = {
  NETWORK_LOG_ENABLED: 'debug:network_log_enabled',
  APP_LOG_ENABLED: 'debug:app_log_enabled',
  NETWORK_CONSOLE_LOG_ENABLED: 'debug:network_console_log_enabled',
};

使用场景：

开发阶段开启所有日志进行调试
测试阶段选择性开启日志
生产环境关闭日志以提升性能

5. 业务日志

功能描述：记录应用运行时的业务日志，支持不同级别（debug、info、warn、error）和分类（category），方便排查业务问题。

日志列表	日志详情

技术实现：

封装统一的 Logger 类，提供 debug、info、warn、error 方法
使用 expo-sqlite 存储日志
支持日志分类和附加数据（data）
提供日志查看界面，支持按级别和消息内容过滤

关键技术栈：

expo-sqlite：日志存储
Logger 工具类：统一日志接口

数据库表结构：

复制代码

CREATE TABLE app_logs (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  level TEXT NOT NULL,
  message TEXT NOT NULL,
  data TEXT,
  category TEXT,
  created_at INTEGER NOT NULL
)

日志级别：

debug：调试信息，用于开发阶段
info：一般信息，记录正常流程
warn：警告信息，需要注意但不影响功能
error：错误信息，记录异常和错误

使用示例：

复制代码

import { logger } from '@/utils/logger';

// 记录调试日志
logger.debug('用户点击按钮', { buttonId: 'submit' }, 'user-action');

// 记录信息日志
logger.info('用户登录成功', { userId: '123' }, 'auth');

// 记录警告日志
logger.warn('API 响应时间较长', { duration: 5000 }, 'performance');

// 记录错误日志
logger.error('请求失败', error, 'api');

核心功能：

按级别过滤日志（全部/debug/info/warn/error）
按消息内容关键词搜索
查看日志详情（包括附加数据）
清空所有日志
复制日志内容

实现要点：

异步保存日志，不阻塞主流程
检查日志开关，未启用时不保存
错误对象自动序列化（包含 name、message、stack）

使用场景：

追踪业务流程
定位业务异常
分析用户行为
性能监控

6. 商业化调试入口

功能描述：测试商业化相关功能，包括商业化弹窗、支付流程等。

技术实现：

使用 Zustand Store (useCommercialStore) 管理商业化状态
通过 openH5CommercialModal() 方法打开商业化弹窗
集成支付测试功能（iOS StoreKit、Android 支付宝）

关键技术栈：

Zustand：商业化状态管理
原生支付模块：iOS StoreKit、Android 支付宝

使用场景：

测试商业化功能
验证支付流程
调试商业化相关业务逻辑

7. 远程配置查看

功能描述：查看和管理应用中的远程配置项，支持查看配置详情、复制配置内容。

配置列表	配置详情

技术实现：

从配置文件中读取所有配置项定义
通过 API 调用获取配置详情
支持 JSON 格式的自动解析和格式化显示
使用底部抽屉（BottomDrawer）展示配置详情

关键技术栈：

远程配置 API
JSON 解析和格式化
React Native 底部抽屉组件

核心功能：

查看所有配置项列表
点击配置项查看详情
自动解析 JSON 格式配置
复制配置内容
显示配置 ID 和描述

使用场景：

查看远程配置内容
验证配置是否正确生效
调试配置相关功能

8. 原生通信测试

功能描述：测试 React Native 与原生代码的通信能力，包括 JSI 同步调用、TurboModule（新架构）、NativeModules（旧架构）等。

技术实现：

JSI 测试 ：通过 react-native-mmkv 测试同步调用性能，对比同步和异步调用的性能差异
TurboModule 检测 ：检查 TurboModuleRegistry 是否可用（新架构）
NativeModules 检测 ：检查 NativeModules 是否可用（旧架构）
支付模块测试：测试 iOS StoreKit 和 Android 支付宝支付功能

测试内容：

环境检查：
- JSI 同步调用可用性
- TurboModuleRegistry 可用性
- NativeModules 可用性
- Platform 信息
- react-native-mmkv 加载状态
- 同步调用性能测试
- 支付模块可用性
JSI 性能测试：
- 测试大量读写操作的性能
- 对比同步和异步调用耗时
- 平均每次操作耗时统计
支付测试：
- iOS StoreKit：加载商品、发起购买、恢复购买
- Android 支付宝：发起支付

性能对比：

JSI 同步调用：平均 < 1ms/次
异步调用：通常 > 10ms/次

使用场景：

验证新架构是否正确启用
测试原生模块是否正常工作
性能对比和优化
支付功能调试

9. State 查看器

功能描述：可视化查看应用中所有 Zustand Store 的状态，支持展开/折叠、复制 JSON、实时刷新。

技术实现：

实现 Store 注册机制（store-registry.ts），统一管理需要查看的 Store
通过 registerStore 函数注册 Store，提供名称、描述和 getState 方法
在 State 查看页面动态获取所有已注册 Store 的状态
递归渲染嵌套对象和数组，支持展开/折叠查看
使用 expo-clipboard 支持复制 JSON

注册示例：

复制代码

import { registerStore } from '@/common/store-registry';
import { useUserStore } from '@/store/user';

registerStore({
  name: 'UserStore',
  description: '用户信息 Store',
  getState: () => useUserStore.getState(),
});

核心功能：

显示所有已注册的 Store 列表
展开/折叠查看 Store 状态
递归渲染嵌套对象和数组
复制单个 Store 的 JSON
实时刷新状态
类型预览和值预览

使用场景：

调试状态管理问题
查看全局状态变化
验证状态更新逻辑
排查状态不一致问题

10. Storage 查看器

功能描述：查看应用本地存储的所有键值对，支持搜索、复制、删除操作。

技术实现：

使用 react-native-mmkv 或 AsyncStorage 作为存储引擎
通过 getAllKeys() 获取所有键，然后批量读取值
支持 JSON 格式的自动识别和格式化显示
提供搜索功能，支持按键名过滤
支持删除单个键或复制所有数据为 JSON

核心功能：

显示所有存储的键值对
按键名搜索过滤
展开/折叠查看值内容
自动识别 JSON 格式并美化显示
复制单个值或所有数据
删除单个键
显示数据统计信息（总键数、类型等）

实现要点：

自动识别 JSON 格式并美化显示
支持实时刷新查看最新数据
提供数据统计信息（总键数、类型等）
支持删除操作（需谨慎）

使用场景：

查看本地存储的数据
调试存储相关问题
清理测试数据
验证数据持久化

11. API 环境切换

功能描述：支持在运行时切换 API 环境（生产、预发布、测试），无需重新编译打包。

技术实现：

使用 expo-secure-store 持久化存储环境配置
通过 ServiceEnvProvider Context 统一管理环境状态
在 HTTP 请求层根据当前环境动态选择 API 基础地址

环境配置映射：

复制代码

const API_BASE_MAP: Record<Env, string> = {
  online: 'https://appapi.xxxx.art/api',
  pre: 'https://appapi-pre.xxxx.art/api',
  test: 'https://appapi-test.xxxx.art/api',
};

核心功能：

显示当前环境
选择并切换环境
切换后提示需要重启应用
环境配置持久化存储

实现要点：

复制代码

// 动态获取基础 URL
const getBaseUrl = (env: Env, path: string) => {
  const base = API_BASE_MAP[env];
  return `${base}/${path.replace(/^\//, '')}`;
};

使用场景：

开发阶段快速切换测试环境
测试不同环境的接口
验证环境配置是否正确

12. Loading 组件演示

功能描述：测试全局 Loading 组件的显示效果，包括全屏和对话框两种模式。

技术实现：

使用 Zustand Store (useGlobalState) 管理 Loading 状态
通过 showLoading(message) 和 hideLoading() 控制显示/隐藏
支持自定义 Loading 消息文本

组件特性：

全屏模式：覆盖整个屏幕，半透明背景
对话框模式：居中显示，带圆角和阴影
支持自定义消息文本
自动显示/隐藏动画

使用示例：

复制代码

import { showLoading, hideLoading } from '@/utils/toast';

// 显示 Loading
showLoading('加载中，请稍候...');

// 3秒后隐藏
setTimeout(() => {
  hideLoading();
}, 3000);

核心功能：

测试 Loading 显示效果
验证消息文本显示
测试自动关闭功能

13. Toast 组件演示

功能描述：测试 Toast 提示组件的显示效果，包括成功、错误、警告、信息四种类型。

技术实现：

使用 react-native-toast-message 库
封装统一的 Toast 方法：toast、toastError、toastWarning、toastInfo
在根布局中集成 Toast 组件

Toast 类型：

success：成功提示（绿色）
error：错误提示（红色）
info：信息提示（蓝色）
warning：警告提示（橙色）

使用示例：

复制代码

import { toast, toastError, toastInfo, toastWarning } from '@/utils/toast';

// 成功提示
toast('操作成功');

// 错误提示
toastError('操作失败');

// 信息提示
toastInfo('这是一条信息');

// 警告提示
toastWarning('请注意');

核心功能：

测试不同类型的 Toast
验证 Toast 显示位置和样式
测试 Toast 自动消失功能

使用场景：

测试 Toast 组件样式
验证 Toast 显示逻辑
调试提示信息展示

14. 埋点查看

功能描述：查看应用事件埋点记录，基于业务日志系统实现，支持按分类过滤和查看详情。

技术实现：

基于业务日志系统实现
使用统一的 Logger 记录埋点事件
通过分类（category）区分不同类型的埋点
在业务日志查看页面中按分类过滤查看

关键技术栈：

Logger 工具类：统一日志接口
expo-sqlite：埋点数据存储
业务日志系统：复用现有日志基础设施

埋点分类示例：

复制代码

// 用户行为埋点
logger.info('用户点击按钮', { buttonId: 'submit', page: 'home' }, 'user-action');

// 页面访问埋点
logger.info('页面访问', { page: 'detail', itemId: '123' }, 'page-view');

// 业务事件埋点
logger.info('订单创建', { orderId: '456', amount: 99.9 }, 'business-event');

// 性能埋点
logger.info('接口耗时', { api: '/api/user', duration: 500 }, 'performance');

核心功能：

在业务日志中按分类过滤埋点
查看埋点详情（事件名、参数、时间）
搜索埋点事件
导出埋点数据

实现要点：

复用业务日志的基础设施
通过 category 字段区分埋点类型
在 data 字段中存储埋点参数
提供专门的埋点查看入口（可选）

使用场景：

验证埋点是否正确上报
查看用户行为数据
分析业务指标
调试埋点逻辑

技术架构总结

核心技术栈

存储层：

expo-sqlite：日志和账户信息存储
expo-secure-store：敏感信息（Token、环境配置）安全存储
react-native-mmkv：高性能键值存储（基于 JSI）

状态管理：

Zustand：全局状态管理（用户、会员、商业化等）
React Context：环境配置管理

网络请求：

Fetch API：HTTP 请求封装
请求拦截：自动记录日志

UI 组件：

React Native 基础组件
react-native-paper：Material Design 组件
react-native-toast-message：Toast 提示
自定义组件：Loading、BottomDrawer 等

原生通信：

JSI：同步调用接口
TurboModule：新架构模块系统
NativeModules：旧架构模块系统

性能优化

日志异步保存：不阻塞主线程
开关控制：可以关闭日志以提升性能
懒加载：配置详情等按需加载
JSI 同步调用：存储操作使用同步调用提升性能

使用建议

开发阶段

开启所有日志功能
使用环境切换功能测试不同环境
使用 State 和 Storage 查看器调试状态问题
使用网络日志调试 API 问题

测试阶段

选择性开启日志功能
使用用户信息切换功能测试不同用户角色
使用埋点查看功能验证数据上报

生产环境

关闭日志功能以提升性能
保留必要的错误日志
通过远程配置控制功能开关

总结

本文详细介绍了一套完整的 RN 应用调试基础设施，涵盖了 14 个核心功能模块。这些工具的核心价值在于：

提升开发效率：快速定位问题，减少重复工作
改善调试体验：统一的调试入口，便捷的操作方式
支持多环境：灵活的环境切换和配置管理
性能可控：通过开关控制功能启用，平衡性能和调试需求

这套基础设施可以根据项目需求进行裁剪和扩展，建议在项目初期就规划好调试工具的建设，能够显著提升后续的开发效率和问题排查能力。