使用 reactoron 调试 RN 应用

什么是Reactotron

Reactotron 是一个强大的 React 和 React Native 应用程序调试器 。它为开发人员提供了一个易于使用的界面，用于监控其应用程序的状态、网络请求和性能指标，并且可用于任何规模的项目，从小型个人应用程序到大型企业应用程序。

它拥有强大的插件系统，允许开发人员扩展和增强 Reactotron 的功能。

您可以使用 Reactotron 来：

查看您的应用程序状态。
显示 API 请求和响应。
执行快速性能基准测试。
订阅您的应用程序状态的部分内容。
显示类似以下内容的消息console.log。
使用源映射堆栈跟踪（包括 saga 堆栈跟踪）跟踪全局错误。
调度行动就像政府运行的精神控制实验。
使用 Redux 或 mobx-state-tree 热交换应用程序的状态。
在 React Native 中显示图像叠加。
在 React Native 中跟踪您的异步存储。

您可以将其作为开发依赖项插入到您的应用程序中，因此它不会增加您的生产构建大小。

安装

在创建项目之前，首先要明确开发环境，如果没有安装相应的环境，可以通过官方的环境搭建指南一步一步搭建。下文中，项目的环境为:

Node.js(v18.7.0)

watchman(2023.03.13.00)

Yarn(v1.22.19)

Java(v17.0.10 2024-01-16 LTS)

Android Studio（v2023.2.1）

项目创建可以通过官方提供的方式进行创建：npx react-native@latest init <项目名>。

Reactotron 作为桌面应用程序（用 Electron 编写）存在，通过 Websocket 与您的 React 或 React-Native 应用程序进行通信。它适用于 macOS、Linux 和 Windows。

首先，您需要安装 Reactotron 桌面应用程序。可以在GitHub上找到最新版本。

安装后，您需要将 Reactotron 客户端添加到您的项目中。请按照以下快速入门指南之一在您的项目中启动并运行 Reactotron。

将 Reactotron 添加到您的 React Native 项目中作为开发依赖项。
shell 复制代码
```
$ yarn add reactotron-react-native -D
```

在根文件夹中创建一个文件 ReactotronConfig.js 并粘贴以下内容：

js 复制代码

import Reactotron from "reactotron-react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";

Reactotron.setAsyncStorageHandler(AsyncStorage)
  .configure() // 控制连接和通信设置
  .useReactNative() // 添加所有内置的 react native 插件
  .connect();

还可以创建自己的插件并通过以下方式提供：

js 复制代码

import Reactotron from 'reactotron-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

Reactotron.setAsyncStorageHandler(AsyncStorage)
  .configure({
    name: 'React Native Demo',
  })
  .useReactNative({
    asyncStorage: false, 
    networking: {
      ignoreUrls: /symbolicate/,
    },
    editor: false, 
    errors: {veto: stackFrame => false},
    overlay: false,
  })
  .connect();

将 Reactotron 添加到你的项目中在 index.js 或 App.tsx 中加入如下代码。
js 复制代码
```
if (__DEV__) {
  import('./ReactotronConfig.js').then(() =>
    console.log('Reactotron Configured'),
  );
}
```
刷新您的应用程序（或运行 npx react-native start）并立即查看 Reactotron。你看到那条CONNECTION线了吗？单击该按钮即可展开。
如果您使用的是 Android 设备或模拟器，请运行以下命令以确保它可以连接到 Reactotron：
shell 复制代码
```
$ adb reverse tcp:9090 tcp:9090
```
如果在项目中做一些调整后，再热更新，可以看到如下：

reactotron 中还提供了自定义命令、插件和高级技巧，可以查看文档。