Network and Console monitoring tool for React Native - Desktop App & SDK
npm install react-native-dev-lens- 🌐 网络监控 - 实时捕获 HTTP 请求和 WebSocket 连接
- 📊 详细信息 - 查看请求/响应头、响应体、查询参数、Cookies 等
- 🎨 主题切换 - 支持深色/浅色模式,界面美观现代
- 🌍 国际化 - 支持中文/英文切换
- 🔍 智能过滤 - 按 URL、请求类型过滤
- 💻 控制台日志 - 捕获和展示应用日志(info/warn/error)

Dev Lens 实际效果 - 网络监控与详细请求信息
1. 下载 Dev Lens 应用
从 GitHub Releases 下载最新版本
> macOS 用户注意: 如果遇到"应用已损坏"错误,在终端运行:
>
> ``bash`
> xattr -cr /Applications/com.cola.dev-lens
>
2. 在你的 React Native 项目中安装 SDK
`bash`
npm install react-native-dev-lens
# 或
yarn add react-native-dev-lens
# 或
pnpm add react-native-dev-lens
3. 在应用入口添加一行代码(例如 index.js 或 App.js)
`javascript
import DevLens from "react-native-dev-lens";
// 就这一行!启用监控
new DevLens().init();
`
4. 打开 Dev Lens 应用
启动 Dev Lens 桌面应用,你就能实时看到所有网络请求和控制台日志了!
`javascript
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
`bash安装依赖
pnpm install
$3
我们提供了完整的 React Native 示例应用用于测试。项目使用 pnpm workspace 方便 SDK 开发:
`bash
1. 安装所有依赖(包括示例应用)
pnpm install2. 安装 iOS pods(仅 iOS)
cd example/ios && pod install && cd ../..3. 启动 Dev Lens 桌面应用
pnpm tauri dev4. 在另一个终端运行示例应用
pnpm --filter example ios
或
pnpm --filter example android
`pnpm workspace 的优势:
- ✅ SDK 修改立即在示例应用中生效
- ✅ 无需
npm link 或手动复制
- ✅ 跨包共享依赖
- ✅ 快速迭代和调试$3
`
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
📡 工作原理
1. Dev Lens 应用启动一个 WebSocket 服务器在
0.0.0.0:3927(可从网络访问)
2. SDK 拦截 fetch 请求和 WebSocket 连接
3. SDK 拦截控制台日志(log、warn、error、info)
4. SDK 通过 WebSocket 连接将数据发送到 Dev Lens(支持自动重连)
5. 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 连接更新- 零配置 - 只需一行代码即可集成
- 无侵入 - 不影响应用性能
- 界面美观 - 现代化设计,支持深色/浅色主题
- 跨平台 - 支持 macOS (Apple Silicon) 和 Windows
- 开源免费 - MIT 协议
MIT License
欢迎提交 Issue 和 Pull Request!
- 开发指南 - 贡献者完整指南
- 示例应用 README - 如何运行示例应用
- WebSocket 迁移 - 从 HTTP 到 WebSocket 的迁移
---