# React Native Debugger · RN 0.58 专用增强版

<p align="center">
  <img src="docs/0.58Reactnative_ICON.png" width="128" alt="React Native Debugger 0.58 Icon" />
</p>

> 基于 [jhen0409/react-native-debugger](https://github.com/jhen0409/react-native-debugger) 深度定制：
> **当前版本专门适用于 React Native 0.58**，并内置 **MCP（Model Context Protocol）AI 调试服务**，
> 让 Cursor / Claude Desktop 等 AI 智能体直接读取调试器上下文，自动定位崩溃与网络故障。

![React Native Debugger MCP](docs/reactnative_mcp.png)

## ✨ 核心特性

保留原版 React Native Debugger 的全部能力：

- 基于 Official Remote Debugging 的独立调试应用，内置 [React DevTools](docs/react-devtools-integration.md) 与 [Redux DevTools](docs/redux-devtools-integration.md)
- [Network Inspect](docs/network-inspect-of-chrome-devtools.md)、Apollo Client DevTools、Open in Editor 等原版功能

本 Fork 新增：

### 🤖 内置 MCP Server（AI Agent 调试服务）

- **标准 MCP 协议**：主进程内嵌轻量 HTTP + SSE 服务（JSON-RPC 2.0），默认端口 `9223`
- **侧边栏 MCP 面板**：一键启停服务、状态指示灯、实时 Console / Network 抓包观测、一键复制 Cursor / Claude Desktop 接入配置
- **自动数据捕获**：劫持 `console.*`、`fetch`、`XMLHttpRequest`，环形缓冲保留最新 500 条日志 + 200 条网络会话（含 Headers / Body / Status / Duration）
- **默认关闭**：不开启时零开销，需要时在侧边栏手动启动

**MCP Tools（供大模型调用）**

| Tool | 说明 |
| :--- | :--- |
| `get_console_logs` | 查询控制台日志（按 `all / error / warn / info` 过滤） |
| `get_network_requests` | 获取网络请求列表（支持 `errors_only` 过滤） |
| `get_network_detail` | 获取单个请求完整 Request / Response Payload |
| `clear_logs` | 清空日志与网络缓冲 |
| `reload_react_native` | 触发 RN 重载（等效 ⌘R） |
| `show_dev_menu` | 唤起 RN 开发者菜单 |

**MCP Resources**：`rn://devtools/console/latest`、`rn://devtools/network/latest`
**MCP Prompts**：`diagnose_last_error`（崩溃/红屏根因诊断）、`analyze_network_failure`（接口失败排查）

## 📦 安装

从 release 页面下载预编译包（macOS Apple Silicon）：

- `react-native-debugger_0.10.13.dmg` — 拖入 Applications 即可使用

### 从源码构建

```bash
# Node >= 17 需要 openssl-legacy-provider（package.json 中已内置）
yarn install
yarn build          # 构建主进程与渲染进程
yarn start          # 开发运行
yarn pack-macos     # 打包 macOS arm64 DMG（自动 ad-hoc 签名）
```

## 🤖 AI 智能体接入

**第 1 步**：打开 React Native Debugger → 侧边栏点击 **MCP** → **Start Server**（默认端口 9223）

**第 2 步**：在 AI 客户端中添加 MCP 服务配置

Cursor（项目根目录 `.cursor/mcp.json`）：

```json
{
  "mcpServers": {
    "rndebugger": {
      "url": "http://localhost:9223/sse"
    }
  }
}
```

Claude Desktop（`claude_desktop_config.json`）：

```json
{
  "mcpServers": {
    "rndebugger": {
      "command": "npx",
      "args": ["-y", "mcp-remote-client", "http://localhost:9223/sse"]
    }
  }
}
```

自研 Agent / 脚本可通过 HTTP 直接调用：

```bash
# 健康检查
curl http://localhost:9223/health

# 调用 MCP Tool（获取最近报错日志）
curl -X POST http://localhost:9223/messages \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"get_console_logs","arguments":{"level":"error"}}}'
```

## 📚 文档

- [MCP AI Agent Integration（架构设计与接入指南）](docs/mcp-ai-agent-integration.md)
- [Getting Started](docs/getting-started.md)
- [Debugger Integration](docs/debugger-integration.md)
- [React DevTools Integration](docs/react-devtools-integration.md)
- [Redux DevTools Integration](docs/redux-devtools-integration.md)
- [Apollo Client DevTools Integration](docs/apollo-client-devtools-integration.md)
- [Network inspect of Chrome Developer Tools](docs/network-inspect-of-chrome-devtools.md)
- [Enable open in editor in console](docs/enable-open-in-editor-in-console.md)
- [Config file in home directory](docs/config-file-in-home-directory.md)
- [Shortcut references](docs/shortcut-references.md)
- [Troubleshooting](docs/troubleshooting.md)

## 🛠 与上游的主要差异

- 适配 **React Native 0.58** 调试场景
- 新增 MCP Server（`electron/mcp-manager.js`、`app/mcp/*`、侧边栏 `McpPanel`）
- 修复 Electron 11 移除 `BrowserWindow.addDevToolsExtension` 导致窗口无法创建的问题（改用 `session.loadExtension`）
- macOS arm64 打包脚本（`scripts/package-macos.sh`，支持 DMG / zip 产物）

## Credits

- 上游项目：[jhen0409/react-native-debugger](https://github.com/jhen0409/react-native-debugger)
- [React DevTools](https://github.com/facebook/react/tree/master/packages/react-devtools)
- [Redux DevTools](https://github.com/gaearon/redux-devtools) / [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools)

## LICENSE

[MIT](LICENSE.md)