React Native Debug Monitor：实时调试和监控您的React Native应用

React Native Debug Monitor是一款专为React Native开发者设计的VSCode扩展工具，旨在提供实时调试和监控功能，帮助开发者更好地管理和优化他们的应用。

主要功能：

• 实时AsyncStorage监控

  • 查看和编辑AsyncStorage内容
  • 存储变化时自动刷新
  • 删除单个项目或清空所有存储

• 网络请求监控

  • 跟踪所有网络请求（XHR、Fetch和Axios）
  • 检查请求/响应头和正文
  • 监控请求时间和状态
  • 支持自定义Axios实例

• 通用功能

  • 适用于iOS和Android
  • 支持物理设备
  • 动态端口配置
  • 简单直观的界面
  • 实时更新

安装步骤：

1. 从VSCode市场安装扩展
2. 在您的React Native项目中安装伴随的npm包：

   npm install --save-dev react-native-debug-monitor

使用方法：

基本设置

import StorageDebugger from 'react-native-debug-monitor';

if (__DEV__) {
  // 使用默认端口（12380）的基本使用
  StorageDebugger.start();
}

使用Axios进行网络监控

import StorageDebugger from 'react-native-debug-monitor';
import axios from './axiosConfig';  // 您的axios实例

if (__DEV__) {
  StorageDebugger.start();
  // 配置axios监控（可选）
  if (StorageDebugger.networkMonitor) {
    StorageDebugger.networkMonitor.addAxiosInstance(axios);
  }
}

高级配置

StorageDebugger.start({
  port: 8088,               // 可选：自定义端口
  serverIP: '192.168.1.100' // 可选：用于物理设备
});

VSCode命令

1. 存储监控：

   • 打开命令面板（Cmd/Ctrl Shift P）
   • 输入"RN: View Storage"
   • 按Enter

2. 网络监控：

   • 打开命令面板（Cmd/Ctrl Shift P）
   • 输入"RN: View Network"
   • 按Enter

要求：

• VSCode 1.97.0或更高版本
• React Native项目
• @react-native-async-storage/async-storage（用于存储监控）

端口配置：

• 默认端口：12380
• 可以通过代码配置、扩展UI更改，或在所选端口被占用时自动回退到默认端口

已知问题：

• 仅适用于开发构建
• 如果Metro打包器重启，可能需要刷新WebSocket连接
• 如果其他开发服务器占用某些端口（例如Metro的8081），这些端口可能不可用
• 网络监控可能无法捕获初始化前的请求

故障排除：

物理设备连接

• 确保设备和计算机在同一网络上
• 验证正确的IP地址配置
• 检查端口是否被防火墙阻止

网络监控问题

• 验证网络监控是否启用
• 检查axios实例配置
• 确保请求在初始化后进行

贡献：

欢迎贡献！请访问我们的GitHub存储库：[GitHub存储库链接]

许可证：

本项目根据MIT许可证授权 - 请查看LICENSE文件了解详情。