Dev Lens

优雅的开发者网络监控工具

实时监控网络请求和控制台日志，支持深色/浅色主题

English | 简体中文

✨ 特性

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

📸 截图

Dev Lens 实际效果 - 网络监控与详细请求信息

🚀 快速开始

$3

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 桌面应用，你就能实时看到所有网络请求和控制台日志了！

$3

`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

🛠️ 给贡献者

$3

- Node.js 18+
- Rust 1.70+
- pnpm

$3

`bash


安装依赖

`bash


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

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

详见 example/README.md。

$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 连接更新

🌟 为什么选择 Dev Lens？

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

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📚 文档

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

🔗 链接

- GitHub 仓库
- 问题追踪
- 发布版本

---