react-native-dev-lens

v0.0.19

Published

a month ago

Network and Console monitoring tool for React Native - Desktop App & SDK

Downloads

0High
0Medium
0Low

z8043413

react-native debugging network console monitoring dev-tools developer-tools network-inspector

Dev Lens

✨ 特性

🌐 网络监控 - 实时捕获 HTTP 请求和 WebSocket 连接
📊 详细信息 - 查看请求/响应头、响应体、查询参数、Cookies 等
🎨 主题切换 - 支持深色/浅色模式，界面美观现代
🌍 国际化 - 支持中文/英文切换
🔍 智能过滤 - 按 URL、请求类型过滤
💻 控制台日志 - 捕获和展示应用日志（info/warn/error）

📸 截图

🚀 快速开始

给用户（React Native 开发者）

下载 Dev Lens 应用
从 GitHub Releases 下载最新版本
macOS 用户注意: 如果遇到"应用已损坏"错误，在终端运行：
```
xattr -cr /Applications/com.cola.dev-lens
```

在你的 React Native 项目中安装 SDK

npm install react-native-dev-lens
# 或
yarn add react-native-dev-lens
# 或
pnpm add react-native-dev-lens

在应用入口添加一行代码（例如 index.js 或 App.js）

import DevLens from "react-native-dev-lens";

// 就这一行！启用监控
new DevLens().init();

打开 Dev Lens 应用
启动 Dev Lens 桌面应用，你就能实时看到所有网络请求和控制台日志了！

配置（可选）

import DevLens from "react-native-dev-lens";

// 仅在开发模式启用
if (__DEV__) {
  new DevLens().init();
}

// 真机调试时，指定电脑的 IP 地址
const devLens = new DevLens({
  enabled: __DEV__,
  wsUrl: "ws://192.168.1.100:3927/ws", // 替换为你电脑的 IP
});
devLens.init();

📦 包含内容

Dev Lens 应用 - 桌面应用程序，支持 macOS (Apple Silicon) 和 Windows
react-native-dev-lens - NPM 包，方便集成

💻 支持平台

macOS - Apple Silicon
Windows - x64

🛠️ 给贡献者

前置要求

Node.js 18+
Rust 1.70+
pnpm

开发

# 安装依赖
pnpm install

# 开发模式运行
pnpm tauri dev

# 生产构建
pnpm tauri build

测试示例应用

我们提供了完整的 React Native 示例应用用于测试。项目使用 pnpm workspace 方便 SDK 开发：

# 1. 安装所有依赖（包括示例应用）
pnpm install

# 2. 安装 iOS pods（仅 iOS）
cd example/ios && pod install && cd ../..

# 3. 启动 Dev Lens 桌面应用
pnpm tauri dev

# 4. 在另一个终端运行示例应用
pnpm --filter example ios
# 或
pnpm --filter example android

pnpm workspace 的优势：

✅ SDK 修改立即在示例应用中生效
✅ 无需 npm link 或手动复制
✅ 跨包共享依赖
✅ 快速迭代和调试

详见 example/README.md。

项目结构

dev-lens/
├── src/                    # 前端源码
│   ├── App.tsx            # 主应用组件
│   ├── i18n.ts            # 国际化配置
│   └── assets/            # 静态资源
├── src-tauri/             # Tauri 后端
│   ├── src/
│   │   └── lib.rs         # Rust 后端（包含 HTTP 服务器）
│   └── icons/             # 应用图标
├── sdk/                   # 集成 SDK
│   └── react-native-dev-lens/      # NPM 包
└── public/                # 公共资源

🔧 技术栈

前端: React 19 + TypeScript
桌面框架: Tauri 2.0
UI 组件: DaisyUI + Tailwind CSS
后端: Rust + Axum（WebSocket 服务器，端口 3927）
国际化: i18next + react-i18next
构建工具: Vite

📡 工作原理

Dev Lens 应用启动一个 WebSocket 服务器在 0.0.0.0:3927（可从网络访问）
SDK 拦截 fetch 请求和 WebSocket 连接
SDK 拦截控制台日志（log、warn、error、info）
SDK 通过 WebSocket 连接将数据发送到 Dev Lens（支持自动重连）
Dev Lens 实时展示数据，界面美观

连接选项：

本地/模拟器: ws://127.0.0.1:3927/ws（默认）
真机: ws://你的电脑IP:3927/ws（例如 ws://192.168.1.100:3927/ws）
Android 模拟器: ws://10.0.2.2:3927/ws

服务器监听所有网络接口，可以从同一网络的任何设备连接。

🎯 使用场景

开发时调试网络请求
查看 API 响应数据和头信息
追踪 WebSocket 连接
监控应用日志输出
检查 CORS 配置
查看请求/响应时间

📝 WebSocket 协议

Dev Lens 使用 WebSocket 进行实时通信：

端点: ws://127.0.0.1:3927/ws
消息格式: JSON，包含 type 字段
- type: "network" - 网络请求日志
- type: "console" - 控制台日志
- type: "websocket-update" - WebSocket 连接更新

🌟 为什么选择 Dev Lens？

零配置 - 只需一行代码即可集成
无侵入 - 不影响应用性能
界面美观 - 现代化设计，支持深色/浅色主题
跨平台 - 支持 macOS (Apple Silicon) 和 Windows
开源免费 - MIT 协议

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📚 文档

开发指南 - 贡献者完整指南
示例应用 README - 如何运行示例应用
WebSocket 迁移 - 从 HTTP 到 WebSocket 的迁移