react-native-ai-debugger 1.1.4 → 1.4.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (144) hide show
  1. package/LICENSE +12 -1
  2. package/README.md +198 -1063
  3. package/build/__tests__/helpers/tap-test-helpers.d.ts +36 -0
  4. package/build/__tests__/helpers/tap-test-helpers.d.ts.map +1 -0
  5. package/build/__tests__/helpers/tap-test-helpers.js +130 -0
  6. package/build/__tests__/helpers/tap-test-helpers.js.map +1 -0
  7. package/build/__tests__/integration/connection-health.test.js +12 -6
  8. package/build/__tests__/integration/connection-health.test.js.map +1 -1
  9. package/build/__tests__/integration/execute-in-app.test.js +2 -1
  10. package/build/__tests__/integration/execute-in-app.test.js.map +1 -1
  11. package/build/__tests__/integration/tap-strategies.test.d.ts +2 -0
  12. package/build/__tests__/integration/tap-strategies.test.d.ts.map +1 -0
  13. package/build/__tests__/integration/tap-strategies.test.js +329 -0
  14. package/build/__tests__/integration/tap-strategies.test.js.map +1 -0
  15. package/build/__tests__/integration/tools.test.js +9 -10
  16. package/build/__tests__/integration/tools.test.js.map +1 -1
  17. package/build/__tests__/unit/burst.test.d.ts +2 -0
  18. package/build/__tests__/unit/burst.test.d.ts.map +1 -0
  19. package/build/__tests__/unit/burst.test.js +50 -0
  20. package/build/__tests__/unit/burst.test.js.map +1 -0
  21. package/build/__tests__/unit/connection-health.test.js +26 -16
  22. package/build/__tests__/unit/connection-health.test.js.map +1 -1
  23. package/build/__tests__/unit/fingerprint.test.d.ts +2 -0
  24. package/build/__tests__/unit/fingerprint.test.d.ts.map +1 -0
  25. package/build/__tests__/unit/fingerprint.test.js +89 -0
  26. package/build/__tests__/unit/fingerprint.test.js.map +1 -0
  27. package/build/__tests__/unit/imageBuffer.test.d.ts +2 -0
  28. package/build/__tests__/unit/imageBuffer.test.d.ts.map +1 -0
  29. package/build/__tests__/unit/imageBuffer.test.js +128 -0
  30. package/build/__tests__/unit/imageBuffer.test.js.map +1 -0
  31. package/build/__tests__/unit/logs.test.js +9 -0
  32. package/build/__tests__/unit/logs.test.js.map +1 -1
  33. package/build/__tests__/unit/networkInterceptor.test.d.ts +2 -0
  34. package/build/__tests__/unit/networkInterceptor.test.d.ts.map +1 -0
  35. package/build/__tests__/unit/networkInterceptor.test.js +104 -0
  36. package/build/__tests__/unit/networkInterceptor.test.js.map +1 -0
  37. package/build/__tests__/unit/screenshot-diff.test.d.ts +2 -0
  38. package/build/__tests__/unit/screenshot-diff.test.d.ts.map +1 -0
  39. package/build/__tests__/unit/screenshot-diff.test.js +97 -0
  40. package/build/__tests__/unit/screenshot-diff.test.js.map +1 -0
  41. package/build/__tests__/unit/tap.test.js +433 -28
  42. package/build/__tests__/unit/tap.test.js.map +1 -1
  43. package/build/core/android.d.ts.map +1 -1
  44. package/build/core/android.js +64 -29
  45. package/build/core/android.js.map +1 -1
  46. package/build/core/appDetection.d.ts +8 -0
  47. package/build/core/appDetection.d.ts.map +1 -0
  48. package/build/core/appDetection.js +91 -0
  49. package/build/core/appDetection.js.map +1 -0
  50. package/build/core/bundle.d.ts.map +1 -1
  51. package/build/core/bundle.js +15 -23
  52. package/build/core/bundle.js.map +1 -1
  53. package/build/core/config.d.ts +8 -0
  54. package/build/core/config.d.ts.map +1 -0
  55. package/build/core/config.js +27 -0
  56. package/build/core/config.js.map +1 -0
  57. package/build/core/connection.d.ts +47 -3
  58. package/build/core/connection.d.ts.map +1 -1
  59. package/build/core/connection.js +519 -124
  60. package/build/core/connection.js.map +1 -1
  61. package/build/core/executor.d.ts +57 -14
  62. package/build/core/executor.d.ts.map +1 -1
  63. package/build/core/executor.js +936 -208
  64. package/build/core/executor.js.map +1 -1
  65. package/build/core/fingerprint.d.ts +4 -0
  66. package/build/core/fingerprint.d.ts.map +1 -0
  67. package/build/core/fingerprint.js +47 -0
  68. package/build/core/fingerprint.js.map +1 -0
  69. package/build/core/guides.d.ts.map +1 -1
  70. package/build/core/guides.js +48 -9
  71. package/build/core/guides.js.map +1 -1
  72. package/build/core/httpServer.js.map +1 -1
  73. package/build/core/imageBuffer.d.ts +37 -0
  74. package/build/core/imageBuffer.d.ts.map +1 -0
  75. package/build/core/imageBuffer.js +58 -0
  76. package/build/core/imageBuffer.js.map +1 -0
  77. package/build/core/index.d.ts +21 -17
  78. package/build/core/index.d.ts.map +1 -1
  79. package/build/core/index.js +21 -19
  80. package/build/core/index.js.map +1 -1
  81. package/build/core/ios.d.ts +36 -7
  82. package/build/core/ios.d.ts.map +1 -1
  83. package/build/core/ios.js +553 -323
  84. package/build/core/ios.js.map +1 -1
  85. package/build/core/license.d.ts +38 -0
  86. package/build/core/license.d.ts.map +1 -0
  87. package/build/core/license.js +265 -0
  88. package/build/core/license.js.map +1 -0
  89. package/build/core/logbox.d.ts +51 -0
  90. package/build/core/logbox.d.ts.map +1 -0
  91. package/build/core/logbox.js +258 -0
  92. package/build/core/logbox.js.map +1 -0
  93. package/build/core/logs.d.ts +1 -0
  94. package/build/core/logs.d.ts.map +1 -1
  95. package/build/core/logs.js +5 -0
  96. package/build/core/logs.js.map +1 -1
  97. package/build/core/metro.d.ts +8 -0
  98. package/build/core/metro.d.ts.map +1 -1
  99. package/build/core/metro.js +28 -0
  100. package/build/core/metro.js.map +1 -1
  101. package/build/core/networkInterceptor.d.ts +30 -0
  102. package/build/core/networkInterceptor.d.ts.map +1 -0
  103. package/build/core/networkInterceptor.js +207 -0
  104. package/build/core/networkInterceptor.js.map +1 -0
  105. package/build/core/ocr.d.ts +8 -3
  106. package/build/core/ocr.d.ts.map +1 -1
  107. package/build/core/ocr.js +116 -15
  108. package/build/core/ocr.js.map +1 -1
  109. package/build/core/posthog.d.ts +5 -0
  110. package/build/core/posthog.d.ts.map +1 -0
  111. package/build/core/posthog.js +46 -0
  112. package/build/core/posthog.js.map +1 -0
  113. package/build/core/sdkBridge.d.ts +67 -0
  114. package/build/core/sdkBridge.d.ts.map +1 -0
  115. package/build/core/sdkBridge.js +148 -0
  116. package/build/core/sdkBridge.js.map +1 -0
  117. package/build/core/state.d.ts +26 -5
  118. package/build/core/state.d.ts.map +1 -1
  119. package/build/core/state.js +83 -10
  120. package/build/core/state.js.map +1 -1
  121. package/build/core/telemetry.d.ts +19 -1
  122. package/build/core/telemetry.d.ts.map +1 -1
  123. package/build/core/telemetry.js +165 -8
  124. package/build/core/telemetry.js.map +1 -1
  125. package/build/core/types.d.ts +11 -0
  126. package/build/core/types.d.ts.map +1 -1
  127. package/build/index.js +1304 -304
  128. package/build/index.js.map +1 -1
  129. package/build/pro/screenshot-diff.d.ts +10 -0
  130. package/build/pro/screenshot-diff.d.ts.map +1 -0
  131. package/build/pro/screenshot-diff.js +38 -0
  132. package/build/pro/screenshot-diff.js.map +1 -0
  133. package/build/pro/tap.d.ts +160 -0
  134. package/build/pro/tap.d.ts.map +1 -0
  135. package/build/pro/tap.js +1215 -0
  136. package/build/pro/tap.js.map +1 -0
  137. package/build/tools/accountTools.d.ts +44 -0
  138. package/build/tools/accountTools.d.ts.map +1 -0
  139. package/build/tools/accountTools.js +217 -0
  140. package/build/tools/accountTools.js.map +1 -0
  141. package/package.json +11 -8
  142. package/build/core/httpServer.js +0 -2459
  143. package/build/core/httpServerProcess.js +0 -153
  144. package/build/httpServerStandalone.js +0 -31
package/README.md CHANGED
@@ -1,87 +1,122 @@
1
- # React Native AI Debugger
1
+ # React Native AI DevTools
2
2
 
3
- An MCP (Model Context Protocol) server for AI-powered React Native debugging. Enables AI assistants like Claude to capture logs, execute code, inspect state, and control navigation in your React Native app.
3
+ An MCP server that gives AI assistants real-time access to a running React Native app. It bridges the gap between static code and live runtime, turning AI assistants from guessing machines into informed development partners.
4
+
5
+ **Positioning:** This is not a debugger. This is not a QA tool. This is a Runtime AI Bridge — the missing layer between AI coding assistants and live mobile applications. Without it, your AI assistant is blind. With it, the AI sees everything happening in your app in real time.
6
+
7
+ ## Feedback & Feature Requests
8
+
9
+ Have an idea or found something that could be better? Head over to [GitHub Discussions](https://github.com/igorzheludkov/react-native-ai-devtools/discussions) to share feedback, request features, and vote on what gets built next.
4
10
 
5
11
  ## Features
6
12
 
7
13
  ### Runtime Interaction
8
14
 
9
- - **Console Log Capture** - Capture `console.log`, `warn`, `error`, `info`, `debug` with filtering and search
10
- - **React Component Inspection** - Inspect component tree, props, state/hooks, and layout styles at runtime
11
- - **Network Request Tracking** - Monitor HTTP requests/responses with headers, timing, and body content
12
- - **JavaScript Execution** - Run code directly in your app (REPL-style) and inspect results
13
- - **Global State Debugging** - Discover and inspect Apollo Client, Redux stores, Expo Router, and custom globals
14
- - **Bundle Error Detection** - Get Metro bundler errors and compilation issues with file locations
15
- - **Debug Web Dashboard** - Browser-based UI for real-time log and network monitoring
15
+ - **Console Log Capture** - Capture `console.log`, `warn`, `error`, `info`, `debug` with filtering and search
16
+ - **Network Request Tracking** - Monitor HTTP requests/responses with headers, timing, and body content. Install the optional [SDK](https://www.npmjs.com/package/react-native-ai-devtools-sdk) for full capture from app startup including request/response bodies
17
+ - **JavaScript Execution** - Run code directly in your app (REPL-style) and inspect results
18
+ - **Global State Debugging** - Discover and inspect Apollo Client, Redux stores, Expo Router, and custom globals
19
+ - **Bundle Error Detection** - Get Metro bundler errors and compilation issues with file locations
16
20
 
17
21
  ### Device Control
18
22
 
19
- - **iOS Simulator** - Screenshots, app management, URL handling, boot/terminate (via simctl)
20
- - **Android Devices** - Screenshots, app install/launch, package management (via ADB)
21
- - **Unified Tap** - Single `tap` tool with automatic fallback chain: fiber tree → accessibility → OCR → coordinates. Auto-detects platform, accepts pixels from screenshots
22
- - **UI Automation** - Swipe, long press, text input, and key events on both platforms
23
- - **Accessibility Inspection** - Query UI hierarchy to find elements by text, label, or resource ID
24
- - **OCR Text Extraction** - Extract visible text with tap-ready coordinates (works on any screen content)
23
+ - **iOS Simulator** - Screenshots, app management, URL handling, boot/terminate (via simctl)
24
+ - **Android Devices** - Screenshots, app install/launch, package management (via ADB)
25
+ - **Unified Tap** - Single `tap` tool with automatic fallback chain: fiber tree → accessibility → OCR → coordinates. Auto-detects platform, accepts pixels from screenshots. Returns post-tap screenshot and verifies visual change by default
26
+ - **UI Automation** - Swipe, long press, text input, and key events on both platforms
27
+ - **Accessibility Inspection** - Query UI hierarchy to find elements by text, label, or resource ID
28
+ - **OCR Text Extraction** - Extract visible text with tap-ready coordinates via Google Cloud Vision (works on any screen content)
29
+
30
+ ### Multi-Device Debugging
31
+
32
+ - **Connect All Devices** - `scan_metro` automatically discovers and connects to all Bridgeless targets on each Metro port
33
+ - **Device Targeting** - Every tool accepts an optional `device` parameter for targeting specific devices by name (case-insensitive substring match)
34
+ - **Per-Device Buffers** - Logs and network requests are captured separately per device for clean debugging
35
+ - **Cross-Platform Comparison** - Debug iOS and Android side-by-side, comparing logs, network traffic, and component trees
25
36
 
26
37
  ### Under the Hood
27
38
 
28
- - **Auto-Discovery** - Scans Metro on ports 8081, 8082, 19000-19002 automatically
29
- - **Smart Device Selection** - Prioritizes Bridgeless > Hermes > standard React Native targets
30
- - **Auto-Reconnection** - Exponential backoff (up to 8 attempts) when connection drops
31
- - **Efficient Buffering** - Circular buffers: 500 logs, 200 network requests
32
- - **Platform Support** - Expo SDK 54+ (Bridgeless) and React Native 0.70+ (Hermes)
39
+ - **Auto-Discovery** - Scans Metro on ports 8081, 8082, 19000-19002 automatically
40
+ - **Multi-Device Support** - Connects to all Bridgeless targets simultaneously, with per-device log and network buffers
41
+ - **Auto-Reconnection** - Exponential backoff (up to 8 attempts) when connection drops
42
+ - **Efficient Buffering** - Circular buffers: 500 logs, 200 network requests
43
+ - **Platform Support** - Expo SDK 54+ (Bridgeless) and React Native 0.70+ (Hermes)
33
44
 
34
- ## Claude Code Skills
45
+ ## Platform Setup
46
+
47
+ ### Android
35
48
 
36
- This repository includes pre-built [Claude Code skills](https://docs.anthropic.com/en/docs/claude-code/skills) for common React Native debugging workflows. Skills let Claude handle multi-step tasks (session setup, log inspection, network debugging, etc.) with a single slash command instead of manual back-and-forth.
49
+ Android works out of the box — all device control tools use ADB, which ships with Android Studio. Verify it's available:
37
50
 
38
- ### Available Skills
51
+ ```bash
52
+ adb devices
53
+ ```
39
54
 
40
- | Skill | Description |
41
- | ----- | ----------- |
42
- | `session-setup` | Bootstrap a debugging session: discover devices, boot simulators, connect to Metro |
43
- | `debug-logs` | Capture, filter, and analyze console logs to find errors and warnings |
44
- | `network-inspect` | Monitor and inspect HTTP requests, filter by status/method, and analyze failures |
45
- | `app-state` | Inspect Redux/Apollo/context state, navigate the app, and execute code in the runtime |
46
- | `component-inspect` | Inspect React component tree, props, state, and layout |
47
- | `layout-check` | Verify UI layout against design specs using screenshots and component data |
48
- | `device-interact` | Automate device interaction: tap, swipe, text input, and element finding |
49
- | `bundle-check` | Detect and diagnose Metro bundler errors and compilation failures |
50
- | `native-rebuild` | Rebuild and verify the app after installing native Expo packages |
55
+ ### iOS Simulator — UI Automation Setup
51
56
 
52
- See [`skills/overview.md`](./skills/overview.md) for a decision guide on which skill to use and a recommended workflow.
57
+ iOS UI automation tools (tap, swipe, text input, accessibility queries) require a UI driver. Install one of the following:
53
58
 
54
- ### Installing Skills (Claude Code)
59
+ **Option A: AXe CLI (experimental)**
55
60
 
56
- Copy the skill files into your project's `.claude/skills/` directory:
61
+ [AXe](https://github.com/cameroncooke/AXe) is a standalone CLI for iOS simulator automation. No daemon required — single binary, simple setup.
57
62
 
58
63
  ```bash
59
- # Install all skills
60
- mkdir -p .claude/skills
61
- curl -s https://api.github.com/repos/igorzheludkov/react-native-ai-debugger/contents/skills \
62
- | grep download_url \
63
- | cut -d '"' -f 4 \
64
- | xargs -I {} sh -c 'curl -sL {} -o .claude/skills/$(basename {})'
64
+ brew install cameroncooke/axe/axe
65
65
  ```
66
66
 
67
- Or pick individual skills from the [`skills/`](./skills/) folder and drop them into `.claude/skills/`.
67
+ Verify: `axe --version`
68
68
 
69
- Then invoke in Claude Code:
69
+ Add `env` to your MCP server configuration:
70
70
 
71
+ ```json
72
+ {
73
+ "mcpServers": {
74
+ "rn-debugger": {
75
+ "type": "stdio",
76
+ "command": "npx",
77
+ "args": ["react-native-ai-devtools"],
78
+ "env": { "IOS_DRIVER": "axe" }
79
+ }
80
+ }
81
+ }
71
82
  ```
72
- /session-setup
73
- /debug-logs
74
- /network-inspect
83
+
84
+ > **Note:** AXe text input only supports US keyboard layout characters.
85
+
86
+ **Option B: IDB**
87
+
88
+ [IDB (iOS Development Bridge)](https://github.com/facebook/idb) is a tool built by Meta for automating iOS Simulators. Requires a background daemon.
89
+
90
+ ```bash
91
+ brew install idb-companion
75
92
  ```
76
93
 
77
- Skills can also be triggered **automatically** — each skill file contains a "When to Trigger" section that tells Claude when to proactively invoke it without a slash command. For example, Claude will run `bundle-check` on its own when it detects a red screen, or `session-setup` when starting a fresh debugging task with no connection established yet.
94
+ Verify: `idb_companion --list 1`
95
+
96
+ IDB is the default driver — no `IOS_DRIVER` env var needed.
97
+
98
+ **What works without a UI driver:**
99
+
100
+ | Capability | Without IDB/AXe | With IDB/AXe |
101
+ | --------------------------------- | --------------- | ------------ |
102
+ | Screenshots | Yes (simctl) | Yes |
103
+ | App install/launch/terminate | Yes (simctl) | Yes |
104
+ | URL opening | Yes (simctl) | Yes |
105
+ | Boot simulator | Yes (simctl) | Yes |
106
+ | **Tap / swipe / gestures** | **No** | Yes |
107
+ | **Text input** | **No** | Yes |
108
+ | **Accessibility tree queries** | **No** | Yes |
109
+ | **Element finding / waiting** | **No** | Yes |
110
+ | **Hardware buttons (Home, Lock)** | **No** | Yes |
111
+
112
+ > **Troubleshooting**: If you see errors like `"IDB is not installed"` or `"AXe is not installed"` in tap results, install the appropriate driver with the commands above and retry.
78
113
 
79
114
  ## Requirements
80
115
 
81
- - Node.js 18+
82
- - React Native app running with Metro bundler
83
- - **Optional for iOS UI automation**: [Facebook IDB](https://fbidb.io/) - `brew install idb-companion`
84
- - **Optional for OCR**: Python 3.6+ (EasyOCR is installed automatically, see [OCR Setup](#ocr-text-extraction))
116
+ - Node.js 18+
117
+ - React Native app running with Metro bundler
118
+ - **iOS UI automation**: [Facebook IDB](https://fbidb.io/) (`brew install idb-companion`) or [AXe CLI](https://github.com/cameroncooke/AXe) (`brew install cameroncooke/axe/axe`) — required for tap, swipe, text input, accessibility on iOS Simulator
119
+ - **Optional for offline OCR fallback**: Python 3.6+ (only needed when cloud OCR is unavailable, see [OCR Setup](#ocr-text-extraction))
85
120
 
86
121
  ## Claude Code Setup
87
122
 
@@ -90,13 +125,13 @@ No installation required - Claude Code uses `npx` to run the latest version auto
90
125
  ### Global (all projects)
91
126
 
92
127
  ```bash
93
- claude mcp add rn-debugger --scope user -- npx react-native-ai-debugger
128
+ claude mcp add rn-debugger --scope user -- npx react-native-ai-devtools
94
129
  ```
95
130
 
96
131
  ### Project-specific
97
132
 
98
133
  ```bash
99
- claude mcp add rn-debugger --scope project -- npx react-native-ai-debugger
134
+ claude mcp add rn-debugger --scope project -- npx react-native-ai-devtools
100
135
  ```
101
136
 
102
137
  ### Manual Configuration
@@ -105,13 +140,13 @@ Add to `~/.claude.json` (user scope) or `.mcp.json` (project scope):
105
140
 
106
141
  ```json
107
142
  {
108
- "mcpServers": {
109
- "rn-debugger": {
110
- "type": "stdio",
111
- "command": "npx",
112
- "args": ["react-native-ai-debugger"]
113
- }
143
+ "mcpServers": {
144
+ "rn-debugger": {
145
+ "type": "stdio",
146
+ "command": "npx",
147
+ "args": ["react-native-ai-devtools"]
114
148
  }
149
+ }
115
150
  }
116
151
  ```
117
152
 
@@ -127,13 +162,13 @@ Requires VS Code 1.102+ with Copilot ([docs](https://code.visualstudio.com/docs/
127
162
 
128
163
  ```json
129
164
  {
130
- "servers": {
131
- "rn-debugger": {
132
- "type": "stdio",
133
- "command": "npx",
134
- "args": ["-y", "react-native-ai-debugger"]
135
- }
165
+ "servers": {
166
+ "rn-debugger": {
167
+ "type": "stdio",
168
+ "command": "npx",
169
+ "args": ["-y", "react-native-ai-devtools"]
136
170
  }
171
+ }
137
172
  }
138
173
  ```
139
174
 
@@ -147,1024 +182,103 @@ Requires VS Code 1.102+ with Copilot ([docs](https://code.visualstudio.com/docs/
147
182
 
148
183
  ```json
149
184
  {
150
- "mcpServers": {
151
- "rn-debugger": {
152
- "command": "npx",
153
- "args": ["-y", "react-native-ai-debugger"]
154
- }
185
+ "mcpServers": {
186
+ "rn-debugger": {
187
+ "command": "npx",
188
+ "args": ["-y", "react-native-ai-devtools"]
155
189
  }
190
+ }
156
191
  }
157
192
  ```
158
193
 
159
- ## Available Tools
160
-
161
- ### Usage Guide
162
-
163
- | Tool | Description |
164
- | ----------------- | --------------------------------------------------------------------------- |
165
- | `get_usage_guide` | Get recommended workflows for all tools. Call without params for overview, with a topic (`setup`, `inspect`, `layout`, `interact`, `logs`, `network`, `state`, `bundle`) for the full guide |
166
-
167
- The server also sends instructions on connection, so MCP clients automatically learn about `get_usage_guide`.
168
-
169
- ### Connection & Logs
170
-
171
- | Tool | Description |
172
- | ----------------------- | ------------------------------------------------------------------ |
173
- | `scan_metro` | Scan for Metro servers and auto-connect. **Call this first** to start debugging |
174
- | `connect_metro` | Connect to a specific Metro port (use when you know the exact port) |
175
- | `disconnect_metro` | Disconnect from all Metro servers. Frees the CDP slot for the built-in RN debugger. Reconnect with `scan_metro` |
176
- | `get_apps` | List connected apps. Run `scan_metro` first if none connected |
177
- | `get_connection_status` | Get detailed connection health, uptime, and recent disconnects |
178
- | `ensure_connection` | Verify/establish connection with health checks |
179
- | `get_logs` | Retrieve console logs (filtering, truncation, summary, TONL format) |
180
- | `search_logs` | Search logs for specific text (truncation, TONL format) |
181
- | `clear_logs` | Clear the log buffer |
182
-
183
- ### Network Tracking
184
-
185
- | Tool | Description |
186
- | ---------------------- | ---------------------------------------------------------- |
187
- | `get_network_requests` | Retrieve network requests (filtering, summary, TONL format) |
188
- | `search_network` | Search requests by URL pattern (TONL format) |
189
- | `get_request_details` | Get full details of a request (headers, body with truncation) |
190
- | `get_network_stats` | Get statistics: counts by method, status code, domain |
191
- | `clear_network` | Clear the network request buffer |
192
-
193
- ### App Inspection & Execution
194
-
195
- | Tool | Description |
196
- | -------------------- | ------------------------------------------------------------------- |
197
- | `execute_in_app` | Execute simple JS expressions using globals discovered via `list_debug_globals` |
198
- | `list_debug_globals` | Discover available debug objects (Apollo, Redux, Expo Router, etc.) |
199
- | `inspect_global` | Inspect a global object to see its properties and callable methods |
200
- | `reload_app` | Reload the app (auto-connects if needed). Use sparingly - Fast Refresh handles most changes |
201
- | `get_debug_server` | Get the debug HTTP server URL for browser-based viewing |
202
- | `restart_http_server` | Restart the debug HTTP server |
203
-
204
- ### Bundle Tools
205
-
206
- | Tool | Description |
207
- | -------------------- | ------------------------------------------------------------------- |
208
- | `get_bundle_status` | Get Metro bundler status and build state |
209
- | `get_bundle_errors` | Get compilation errors with file locations |
210
- | `clear_bundle_errors` | Clear the bundle error buffer |
211
-
212
- ### React Component Inspection
213
-
214
- **Recommended Workflow**: Use `get_component_tree(focusedOnly=true, structureOnly=true)` for a token-efficient overview of just the active screen (~1-3KB), then drill down with `inspect_component` or `find_components`.
215
-
216
- | Tool | Description |
217
- | -------------------- | ------------------------------------------------------------------- |
218
- | `get_component_tree` | **Start here** with `focusedOnly=true, structureOnly=true` for active screen overview |
219
- | `inspect_component` | **Drill-down tool**: Inspect specific component's props, state/hooks, children |
220
- | `find_components` | **Targeted search**: Find components by pattern with optional layout info |
221
- | `get_screen_layout` | Full layout data - use sparingly, can be large for complex screens |
222
-
223
- ### Element Inspector (Coordinate-Based)
224
-
225
- Inspect React components at specific screen coordinates - like React Native's built-in Element Inspector, but programmatically.
226
-
227
- | Tool | Description |
228
- | -------------------------- | ------------------------------------------------------------------------------ |
229
- | `get_inspector_selection` | **Main tool**: Get React component at coordinates. Auto-enables inspector and taps if x/y provided |
230
- | `toggle_element_inspector` | Manually toggle the Element Inspector overlay on/off |
231
- | `inspect_at_point` | Inspect React component at (x,y) coordinates |
232
-
233
- **Quick Inspection (Recommended)**:
234
- ```
235
- # Single call - auto-enables inspector, taps, returns component info
236
- get_inspector_selection(x=210, y=400)
237
- ```
238
-
239
- Returns:
240
- ```
241
- Element: FastImageView
242
- Path: App > RootNavigation > ... > PlayerModal > FastImage > FastImageView
243
- Frame: (62.3, 130.0) 295.67x295.67
244
- Style: { borderRadius: 15, overflow: "hidden" }
245
- ```
246
-
247
- **Manual Flow** (for more control):
248
- ```
249
- # 1. Enable the inspector overlay
250
- toggle_element_inspector()
251
-
252
- # 2. Tap to select element
253
- tap with x=630 y=1200 # pixel coordinates from screenshot
254
-
255
- # 3. Read the selection
256
- get_inspector_selection()
257
-
258
- # 4. Disable overlay when done
259
- toggle_element_inspector()
260
- ```
261
-
262
- **Token Efficiency**: Returns ~0.2-0.5KB vs 15-25KB for full component tree. Works on all React Native versions including Fabric/New Architecture.
194
+ ## Claude Code Skills
263
195
 
264
- ### UI Interaction (Cross-Platform)
196
+ Pre-built skills for common debugging workflows — session setup, log inspection, network debugging, and more. See the [skills guide](docs/skills.md) for the full list and installation instructions.
265
197
 
266
- | Tool | Description |
267
- | ---------------- | ------------------------------------------------------------------------ |
268
- | `tap` | **Unified tap** — auto-detects platform, tries fiber tree → accessibility → OCR → coordinates. Accepts text, testID, component name, or pixel coordinates from screenshots |
269
- | `ocr_screenshot` | Extract all visible text with tap-ready coordinates (works on iOS/Android) |
198
+ ## Available Tools
270
199
 
271
- **Examples:**
272
- ```
273
- tap with text="Submit" # Finds and taps by visible text
274
- tap with testID="login-btn" # Finds by testID prop
275
- tap with component="HamburgerIcon" # Finds by React component name
276
- tap with x=300 y=600 # Taps at pixel coordinates (auto-converts)
277
- tap with text="Menu" strategy="ocr" # Forces OCR strategy only
278
- ```
200
+ See the [full tool reference](docs/tools.md) for all tools with descriptions. Key tools:
279
201
 
280
- ### Android (ADB)
281
-
282
- | Tool | Description |
283
- | --------------------------- | ------------------------------------------------------------- |
284
- | `list_android_devices` | List connected Android devices and emulators via ADB |
285
- | `android_screenshot` | Take a screenshot from an Android device/emulator |
286
- | `android_install_app` | Install an APK on an Android device/emulator |
287
- | `android_launch_app` | Launch an app by package name |
288
- | `android_list_packages` | List installed packages (with optional filter) |
289
- | `android_long_press` | Long press at specific coordinates |
290
- | `android_swipe` | Swipe from one point to another |
291
- | `android_input_text` | Type text at current focus point |
292
- | `android_key_event` | Send key events (HOME, BACK, ENTER, etc.) |
293
- | `android_get_screen_size` | Get device screen resolution |
294
- | `android_describe_all` | Get full UI accessibility tree via uiautomator |
295
- | `android_describe_point` | Get UI element info at specific coordinates |
296
- | `android_find_element` | Find element by text/contentDesc/resourceId (no screenshot) |
297
- | `android_wait_for_element` | Wait for element to appear (useful for screen transitions) |
298
-
299
- ### iOS (Simulator)
300
-
301
- | Tool | Description |
302
- | ----------------------- | --------------------------------------------------------------- |
303
- | `list_ios_simulators` | List available iOS simulators |
304
- | `ios_screenshot` | Take a screenshot from an iOS simulator |
305
- | `ios_install_app` | Install an app bundle (.app) on a simulator |
306
- | `ios_launch_app` | Launch an app by bundle ID |
307
- | `ios_open_url` | Open a URL (deep links or web URLs) |
308
- | `ios_terminate_app` | Terminate a running app |
309
- | `ios_boot_simulator` | Boot a simulator by UDID |
310
- | `ios_swipe` | Swipe gesture (requires IDB) |
311
- | `ios_input_text` | Type text into active field (requires IDB) |
312
- | `ios_button` | Press hardware button: HOME, LOCK, SIRI (requires IDB) |
313
- | `ios_key_event` | Send key event by keycode (requires IDB) |
314
- | `ios_key_sequence` | Send sequence of key events (requires IDB) |
315
- | `ios_describe_all` | Get full accessibility tree (requires IDB) |
316
- | `ios_describe_point` | Get element at point (requires IDB) |
317
- | `ios_find_element` | Find element by label/value (requires IDB, no screenshot) |
318
- | `ios_wait_for_element` | Wait for element to appear (requires IDB) |
202
+ | Tool | Description |
203
+ | --------------------------------------- | ---------------------------------------------------------------------------------------- |
204
+ | `scan_metro` | **Start here** — scan for Metro servers and auto-connect |
205
+ | `get_logs` / `search_logs` | Capture and search console logs with filtering and summaries |
206
+ | `get_network_requests` | Monitor HTTP requests with method/status filtering |
207
+ | `get_screen_layout` | Screen map of visible components with positions, sizes, and text content |
208
+ | `tap` | **Unified tap** — auto-detects platform, tries fiber → accessibility → OCR → coordinates |
209
+ | `execute_in_app` | Run JS expressions in the app runtime (REPL-style) |
210
+ | `ios_screenshot` / `android_screenshot` | Take device screenshots |
319
211
 
320
212
  ## Usage
321
213
 
322
214
  1. Start your React Native app:
323
215
 
324
- ```bash
325
- npm start
326
- # or
327
- expo start
328
- ```
329
-
330
- 2. In Claude Code, scan for Metro:
331
-
332
- ```
333
- Use scan_metro to find and connect to Metro
334
- ```
335
-
336
- 3. Get logs:
337
- ```
338
- Use get_logs to see recent console output
339
- ```
340
-
341
- ### `get_logs` Tool Reference
342
-
343
- The `get_logs` tool has multiple parameters for controlling output size and format. Here's the complete reference:
344
-
345
- | Parameter | Type | Default | Description |
346
- |-----------|------|---------|-------------|
347
- | `maxLogs` | number | 50 | Maximum number of logs to return |
348
- | `level` | string | "all" | Filter by level: `all`, `log`, `warn`, `error`, `info`, `debug` |
349
- | `startFromText` | string | - | Start from the last log containing this text |
350
- | `maxMessageLength` | number | 500 | Max chars per message (0 = unlimited) |
351
- | `verbose` | boolean | false | Disable all truncation, return full messages |
352
- | `format` | string | "text" | Output format: `text` or `tonl` (30-50% smaller) |
353
- | `summary` | boolean | false | Return counts + last 5 messages only |
354
-
355
- #### Recommended Usage Patterns
356
-
357
- ```
358
- # Quick overview (always start here)
359
- get_logs with summary=true
360
-
361
- # Recent errors only
362
- get_logs with level="error" maxLogs=20
363
-
364
- # Logs since last app reload
365
- get_logs with startFromText="Running app" maxLogs=100
366
-
367
- # Full messages for debugging specific issues
368
- get_logs with maxLogs=10 verbose=true
369
-
370
- # Token-efficient format for large outputs
371
- get_logs with format="tonl" maxLogs=100
372
-
373
- # Compact overview with shorter messages
374
- get_logs with maxMessageLength=200 maxLogs=50
375
- ```
376
-
377
- ### Filtering Logs
378
-
379
- ```
380
- get_logs with maxLogs=20 and level="error"
381
- ```
382
-
383
- Available levels: `all`, `log`, `warn`, `error`, `info`, `debug`
384
-
385
- ### Start from Specific Line
386
-
387
- ```
388
- get_logs with startFromText="iOS Bundled" and maxLogs=100
389
- ```
390
-
391
- This finds the **last** (most recent) line containing the text and returns logs from that point forward. Useful for getting logs since the last app reload.
392
-
393
- ### Search Logs
394
-
395
- ```
396
- search_logs with text="error" and maxResults=20
397
- ```
398
-
399
- Case-insensitive search across all log messages.
400
-
401
- ### Token-Optimized Output
402
-
403
- The tools include several options to reduce token usage when working with AI assistants.
404
-
405
- #### Summary Mode (Recommended First Step)
406
-
407
- **Always start with `summary=true`** - it gives you the full picture in ~10-20 tokens instead of potentially thousands:
408
-
409
- ```
410
- get_logs with summary=true
411
- ```
412
-
413
- Returns:
414
- - **Total count** - How many logs are in the buffer
415
- - **Breakdown by level** - See if there are errors/warnings at a glance
416
- - **Last 5 messages** - Most recent activity (truncated to 100 chars each)
417
-
418
- Example output:
419
-
420
- ```
421
- Total: 847 logs
422
-
423
- By Level:
424
- LOG: 612
425
- WARN: 180
426
- ERROR: 55
427
-
428
- Last 5 messages:
429
- 14:32:45 [LOG] User clicked button...
430
- 14:32:46 [WARN] Slow query detected...
431
- 14:32:47 [ERROR] Network request failed...
432
- ```
433
-
434
- #### Why Summary First?
435
-
436
- | Approach | Tokens | Use Case |
437
- |----------|--------|----------|
438
- | `summary=true` | ~20-50 | Quick health check, see if errors exist |
439
- | `level="error"` | ~100-500 | Investigate specific errors |
440
- | `maxLogs=50` (default) | ~500-2000 | General debugging |
441
- | `verbose=true` | ~2000-10000+ | Deep dive into specific data |
442
-
443
- **Recommended workflow:**
444
- 1. `summary=true` → See the big picture
445
- 2. `level="error"` or `level="warn"` → Focus on problems
446
- 3. `startFromText="..."` → Get logs since specific event
447
- 4. `verbose=true` with low `maxLogs` → Full details when needed
448
-
449
- #### Message Truncation
450
-
451
- Long log messages are truncated by default (500 chars). Adjust as needed:
452
-
453
- ```
454
- # Shorter for overview
455
- get_logs with maxMessageLength=200
456
-
457
- # Full messages (use with lower maxLogs)
458
- get_logs with maxLogs=10 verbose=true
459
-
460
- # Unlimited
461
- get_logs with maxMessageLength=0
462
- ```
463
-
464
- #### TONL Format
465
-
466
- Use TONL (Token-Optimized Notation Language) for ~30-50% smaller output:
467
-
468
- ```
469
- get_logs with format="tonl"
470
- ```
471
-
472
- Output:
473
-
474
- ```
475
- [Format: TONL - compact token-optimized format. Fields in header, values in rows.]
476
- {logs:[{time:"14:32:45",level:"LOG",msg:"App started"},{time:"14:32:46",level:"WARN",msg:"Slow query"}]}
477
- ```
478
-
479
- TONL is also available for `search_logs`, `get_network_requests`, and `search_network`.
480
-
481
- ## Network Tracking
482
-
483
- ### View Recent Requests
484
-
485
- ```
486
- get_network_requests with maxRequests=20
487
- ```
488
-
489
- ### Filter by Method
490
-
491
- ```
492
- get_network_requests with method="POST"
493
- ```
494
-
495
- ### Filter by Status Code
496
-
497
- Useful for debugging auth issues:
498
-
499
- ```
500
- get_network_requests with status=401
501
- ```
502
-
503
- ### Search by URL
504
-
505
- ```
506
- search_network with urlPattern="api/auth"
507
- ```
508
-
509
- ### Get Full Request Details
510
-
511
- After finding a request ID from `get_network_requests`:
512
-
513
- ```
514
- get_request_details with requestId="123.45"
515
- ```
516
-
517
- Shows full headers, request body, response headers, and timing.
518
-
519
- Request body is truncated by default (500 chars). For full body:
520
-
521
- ```
522
- get_request_details with requestId="123.45" verbose=true
523
- ```
524
-
525
- ### Summary Mode (Recommended First Step)
526
-
527
- Get statistics overview before fetching full requests:
528
-
529
- ```
530
- get_network_requests with summary=true
531
- ```
532
-
533
- This returns the same output as `get_network_stats` - counts by method, status, and domain.
534
-
535
- ### TONL Format
536
-
537
- Use TONL for ~30-50% smaller output:
538
-
539
- ```
540
- get_network_requests with format="tonl"
541
- ```
542
-
543
- ### View Statistics
544
-
545
- ```
546
- get_network_stats
547
- ```
548
-
549
- Example output:
550
-
551
- ```
552
- Total requests: 47
553
- Completed: 45
554
- Errors: 2
555
- Avg duration: 234ms
556
-
557
- By Method:
558
- GET: 32
559
- POST: 15
560
-
561
- By Status:
562
- 2xx: 43
563
- 4xx: 2
564
-
565
- By Domain:
566
- api.example.com: 40
567
- cdn.example.com: 7
568
- ```
569
-
570
- ## Debug Web Dashboard
571
-
572
- The MCP server includes a built-in web dashboard for viewing logs and network requests in your browser. This is useful for real-time monitoring without using MCP tools.
573
-
574
- ### Getting the Dashboard URL
575
-
576
- Use the `get_debug_server` tool to find the dashboard URL:
577
-
578
- ```
579
- get_debug_server
580
- ```
581
-
582
- The server automatically finds an available port starting from 3456. Each MCP instance gets its own port, so multiple Claude Code sessions can run simultaneously.
583
-
584
- ### Available Pages
585
-
586
- | URL | Description |
587
- | ---------- | ---------------------------------------------- |
588
- | `/` | Dashboard with overview stats |
589
- | `/logs` | Console logs with color-coded levels |
590
- | `/network` | Network requests with expandable details |
591
- | `/apps` | Connected React Native apps |
592
-
593
- ### Features
594
-
595
- - **Auto-refresh** - Pages update automatically every 3 seconds
596
- - **Color-coded logs** - Errors (red), warnings (yellow), info (blue), debug (gray)
597
- - **Expandable network requests** - Click any request to see full details:
598
- - Request/response headers
599
- - Request body (with JSON formatting)
600
- - Timing information
601
- - Error details
602
- - **GraphQL support** - Shows operation name and variables in compact view:
603
- ```
604
- POST 200 https://api.example.com/graphql 1ms ▶
605
- GetMeetingsBasic (timeFilter: "Future", first: 20)
606
- ```
607
- - **REST body preview** - Shows JSON body preview for non-GraphQL requests
608
-
609
- ### JSON API Endpoints
610
-
611
- For programmatic access, JSON endpoints are also available:
612
-
613
- | URL | Description |
614
- | -------------------- | ----------------------------- |
615
- | `/api/status` | Server status and buffer sizes |
616
- | `/api/logs` | All logs as JSON |
617
- | `/api/network` | All network requests as JSON |
618
- | `/api/bundle-errors` | Metro bundle errors as JSON |
619
- | `/api/apps` | Connected apps as JSON |
620
-
621
- ## App Inspection
622
-
623
- ### Discover Debug Globals
624
-
625
- Find what debugging objects are available in your app:
626
-
627
- ```
628
- list_debug_globals
629
- ```
630
-
631
- Example output:
632
-
633
- ```json
634
- {
635
- "Apollo Client": ["__APOLLO_CLIENT__"],
636
- "Redux": ["__REDUX_STORE__"],
637
- "Expo": ["__EXPO_ROUTER__"],
638
- "Reanimated": ["__reanimatedModuleProxy"]
639
- }
640
- ```
641
-
642
- ### Inspect an Object
643
-
644
- Before calling methods on an unfamiliar object, inspect it to see what's callable:
645
-
646
- ```
647
- inspect_global with objectName="__EXPO_ROUTER__"
648
- ```
649
-
650
- Example output:
651
-
652
- ```json
653
- {
654
- "navigate": { "type": "function", "callable": true },
655
- "push": { "type": "function", "callable": true },
656
- "currentPath": { "type": "string", "callable": false, "value": "/" },
657
- "routes": { "type": "array", "callable": false }
658
- }
659
- ```
660
-
661
- ### Execute Code in App
662
-
663
- Run simple JavaScript expressions using globals discovered via `list_debug_globals`:
664
-
665
- ```
666
- execute_in_app with expression="__DEV__"
667
- // Returns: true
668
-
669
- execute_in_app with expression="__APOLLO_CLIENT__.cache.extract()"
670
- // Returns: Full Apollo cache contents
671
-
672
- execute_in_app with expression="__EXPO_ROUTER__.navigate('/settings')"
673
- // Navigates the app to /settings
674
- ```
675
-
676
- **Limitations (Hermes engine):**
677
- - No `require()` or `import` — only pre-existing globals are available
678
- - No `async/await` syntax — use simple expressions or promise chains (`.then()`)
679
- - No emoji or non-ASCII characters in string literals — causes parse errors
680
- - Keep expressions simple and synchronous when possible
681
-
682
- ## React Component Inspection
683
-
684
- Inspect React components at runtime via the React DevTools hook. These tools let you debug component state, verify layouts, and understand app structure without adding console.logs.
685
-
686
- ### Recommended Workflow (Token-Efficient)
687
-
688
- **Always use the 2-step approach:**
689
-
690
- 1. **Step 1: Get focused screen overview** (~1-3KB)
691
- ```
692
- get_component_tree with focusedOnly=true structureOnly=true
693
- ```
694
-
695
- 2. **Step 2: Drill down** into specific components as needed
696
- ```
697
- inspect_component with componentName="HomeScreen"
216
+ ```bash
217
+ npm start
698
218
  # or
699
- find_components with pattern="Button" includeLayout=true
219
+ expo start
700
220
  ```
701
221
 
702
- This approach uses **~10-20x fewer tokens** than getting full details upfront.
703
-
704
- ### Token Consumption Comparison
705
-
706
- | Approach | Tokens | Use Case |
707
- |----------|--------|----------|
708
- | `focusedOnly=true, structureOnly=true` | ~1-3KB | **Recommended** - active screen structure only |
709
- | `structureOnly=true` | ~15-25KB | Full tree structure (includes navigation, overlays) |
710
- | `inspect_component` | ~1-2KB | Deep dive into specific component |
711
- | `find_components` | ~2-5KB | Targeted search with layout |
712
- | `get_screen_layout` | ~20-50KB+ | Full layout (use sparingly) |
713
-
714
- ### Focused Screen Mode (`focusedOnly`)
715
-
716
- The `focusedOnly` parameter dramatically reduces output by returning only the active screen subtree:
717
-
718
- - **Skips navigation wrappers** - Providers, NavigationContainers, SafeAreaProviders
719
- - **Skips global overlays** - BottomSheet, Modal, Toast, Snackbar components
720
- - **Returns just the focused screen** - Components matching `*Screen` or `*Page` pattern
721
-
722
- ```
723
- get_component_tree with focusedOnly=true structureOnly=true
724
- ```
725
-
726
- Output:
727
-
728
- ```
729
- Focused: HomeScreen
730
-
731
- HomeScreen
732
- Header
733
- Logo
734
- SearchBar
735
- FlatList
736
- ListItem (×12)
737
- Footer
738
- ```
739
-
740
- **When to skip `focusedOnly`:**
741
- - Debugging navigation structure itself
742
- - Investigating which screens are mounted
743
- - Checking global overlay state
744
-
745
- ### Inspecting Overlays (BottomSheet, Modal, Toast)
746
-
747
- Since `focusedOnly` skips global overlays by design, use this workflow to debug them:
222
+ 2. In Claude Code, scan for Metro:
748
223
 
749
- 1. **Find the overlay component:**
750
224
  ```
751
- find_components with pattern="BottomSheet|Modal|Toast"
225
+ Use scan_metro to find and connect to Metro
752
226
  ```
753
227
 
754
- 2. **Inspect its state/props:**
228
+ 3. Get logs:
755
229
  ```
756
- inspect_component with componentName="MyBottomSheet"
230
+ Use get_logs to see recent console output
757
231
  ```
758
232
 
759
- This targeted approach uses ~2-4KB vs ~20KB+ for the full tree.
760
-
761
- ### Step 1: Get Component Tree
762
-
763
- View the React component hierarchy with minimal data:
764
-
765
- ```
766
- # Focused screen only (recommended)
767
- get_component_tree with focusedOnly=true structureOnly=true
768
-
769
- # Full tree structure
770
- get_component_tree with structureOnly=true
771
- ```
772
-
773
- Output (ultra-compact):
774
-
775
- ```
776
- Focused: HomeScreen
777
-
778
- HomeScreen
779
- Header
780
- FlatList
781
- Footer
782
- ```
783
-
784
- This gives you the focused screen structure in just 1-3KB.
785
-
786
- ### Step 2a: Inspect Specific Component
787
-
788
- After identifying a component in the structure, drill down:
789
-
790
- ```
791
- inspect_component with componentName="HomeScreen"
792
- ```
793
-
794
- Output:
795
-
796
- ```json
797
- {
798
- "component": "HomeScreen",
799
- "path": "... > Navigator > HomeScreen",
800
- "props": {
801
- "navigation": "[Object]",
802
- "route": { "name": "Home", "key": "home-xyz" }
803
- },
804
- "hooks": [
805
- { "hookIndex": 0, "value": false },
806
- { "hookIndex": 3, "value": 42 }
807
- ]
808
- }
809
- ```
810
-
811
- Options:
812
- - `includeChildren=true` - Include children tree
813
- - `childrenDepth=2` - How deep to show children (1=direct only, 2+=nested tree)
814
- - `includeState=false` - Skip hooks/state (faster)
815
- - `index=1` - Inspect 2nd instance if multiple exist
816
-
817
- ### Step 2b: Find Components by Pattern
818
-
819
- Search for components and optionally get their layout:
820
-
821
- ```
822
- find_components with pattern="Screen$" includeLayout=true
823
- ```
824
-
825
- Output:
826
-
827
- ```
828
- pattern: Screen$
829
- found: 5
830
- #found{component,path,depth,key,layout}
831
- HomeScreen|... > Navigator > HomeScreen|45|paddingHorizontal:16|
832
- SettingsScreen|... > Navigator > SettingsScreen|45|flex:1|
833
- ```
834
-
835
- Options:
836
- - `includeLayout=true` - Include flex, padding, margin values
837
- - `summary=true` - Get counts only (e.g., "HomeScreen: 1")
838
- - `maxResults=10` - Limit number of results
839
-
840
- ### Full Layout (Use Sparingly)
841
-
842
- For detailed layout of all visible components:
843
-
844
- ```
845
- get_screen_layout
846
- ```
847
-
848
- **Warning**: This returns ~20-50KB for complex screens. Use `find_components` with `includeLayout=true` instead for targeted queries.
849
-
850
- ### Use Cases
851
-
852
- **Figma Alignment / Layout Verification**
853
- ```
854
- # Step 1: See focused screen structure
855
- get_component_tree with focusedOnly=true structureOnly=true
856
-
857
- # Step 2: Get layout for specific components
858
- find_components with pattern="Header|Footer|Button" includeLayout=true
859
- ```
860
-
861
- **Debug State Changes**
862
- ```
863
- # Check hook values before action
864
- inspect_component with componentName="LoginForm"
865
- # → hookIndex 2: false (isLoading)
866
-
867
- # After user action, check again
868
- inspect_component with componentName="LoginForm"
869
- # → hookIndex 2: true (isLoading changed!)
870
- ```
871
-
872
- **Debug Navigation Issues**
873
- ```
874
- # Find which screen is currently mounted (use full tree)
875
- get_component_tree with structureOnly=true
876
- # or
877
- find_components with pattern="Screen$"
878
-
879
- # Check if a screen rendered multiple times (memory leak)
880
- find_components with pattern="HomeScreen" summary=true
881
- ```
882
-
883
- **Debug Overlays (BottomSheet, Modal, Toast)**
884
- ```
885
- # Find and inspect overlay components
886
- find_components with pattern="BottomSheet|Modal"
887
-
888
- # Get overlay props/state
889
- inspect_component with componentName="PaywallModal"
890
- ```
891
-
892
- **Understand Unfamiliar Codebase**
893
- ```
894
- # Quick focused screen overview
895
- get_component_tree with focusedOnly=true structureOnly=true
896
-
897
- # Full app structure (navigation, providers)
898
- get_component_tree with structureOnly=true
233
+ ## Detailed Guides
899
234
 
900
- # Find all button variants
901
- find_components with pattern="Button"
902
-
903
- # Find all context providers
904
- find_components with pattern="Provider$"
905
- ```
906
-
907
- ## Device Interaction
908
-
909
- ### Android (requires ADB)
910
-
911
- List connected devices:
912
-
913
- ```
914
- list_android_devices
915
- ```
916
-
917
- Take a screenshot:
918
-
919
- ```
920
- android_screenshot
921
- ```
922
-
923
- Tap on screen:
924
-
925
- ```
926
- tap with x=540 y=960
927
- ```
928
-
929
- Swipe gesture:
930
-
931
- ```
932
- android_swipe with startX=540 startY=1500 endX=540 endY=500
933
- ```
934
-
935
- Type text (tap input field first):
936
-
937
- ```
938
- tap with x=540 y=400
939
- android_input_text with text="hello@example.com"
940
- ```
941
-
942
- Send key events:
943
-
944
- ```
945
- android_key_event with key="BACK"
946
- android_key_event with key="HOME"
947
- android_key_event with key="ENTER"
948
- ```
949
-
950
- ### iOS Simulator (requires Xcode)
951
-
952
- List available simulators:
953
-
954
- ```
955
- list_ios_simulators
956
- ```
957
-
958
- Boot a simulator:
959
-
960
- ```
961
- ios_boot_simulator with udid="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
962
- ```
963
-
964
- Take a screenshot:
965
-
966
- ```
967
- ios_screenshot
968
- ```
969
-
970
- Launch an app:
971
-
972
- ```
973
- ios_launch_app with bundleId="com.example.myapp"
974
- ```
975
-
976
- Open a deep link:
977
-
978
- ```
979
- ios_open_url with url="myapp://settings"
980
- ```
981
-
982
- ## UI Interaction
983
-
984
- ### Unified `tap` Tool (Recommended)
985
-
986
- The `tap` tool is the simplest way to interact with UI elements. It automatically tries multiple strategies and handles platform detection and coordinate conversion:
987
-
988
- ```
989
- # By visible text — tries fiber tree, accessibility, then OCR
990
- tap with text="Submit"
991
-
992
- # By testID prop
993
- tap with testID="login-btn"
994
-
995
- # By React component name (fiber tree only)
996
- tap with component="HamburgerIcon"
997
-
998
- # By pixel coordinates from screenshot (auto-converts to points on iOS)
999
- tap with x=300 y=600
1000
-
1001
- # Force a specific strategy
1002
- tap with text="Menu" strategy="ocr"
1003
- ```
1004
-
1005
- **Fallback chain:** fiber tree (direct `onPress`) → accessibility tree → OCR → error with suggestion.
1006
-
1007
- On failure, the response includes an actionable `suggestion` telling the agent exactly what to try next.
1008
-
1009
- ### Platform-Specific Tools
1010
-
1011
- For gestures beyond tapping, use platform-specific tools:
1012
-
1013
- ```
1014
- # Swipe
1015
- ios_swipe with startX=200 startY=400 endX=200 endY=100
1016
- android_swipe with startX=540 startY=1500 endX=540 endY=500
1017
-
1018
- # Text input (tap input field first)
1019
- tap with text="Email"
1020
- ios_input_text with text="hello@example.com"
1021
-
1022
- # Key events
1023
- android_key_event with key="BACK"
1024
- ios_button with button="HOME"
1025
- ```
1026
-
1027
- ### Wait for Screen Transitions
1028
-
1029
- ```
1030
- android_wait_for_element with text="Dashboard" timeoutMs=15000
1031
- ios_wait_for_element with label="Home" timeoutMs=10000
1032
- ```
1033
-
1034
- ## OCR Text Extraction
1035
-
1036
- The `ocr_screenshot` tool extracts all visible text from a screenshot with tap-ready coordinates. This is useful when accessibility labels are missing or when you need to find text that isn't exposed in the accessibility tree.
1037
-
1038
- ### Why OCR?
1039
-
1040
- | Approach | Pros | Cons |
1041
- |----------|------|------|
1042
- | Accessibility tree (`find_element`) | Fast, reliable, low token usage | Only finds elements with accessibility labels |
1043
- | Screenshot + Vision | Visual layout understanding | High token usage, slow |
1044
- | **OCR** | Works on ANY visible text, returns tap coordinates | Requires text to be visible, may miss small text |
1045
-
1046
- ### Usage
1047
-
1048
- ```
1049
- ocr_screenshot with platform="ios"
1050
- ```
1051
-
1052
- Returns all visible text with tap-ready coordinates:
1053
-
1054
- ```json
1055
- {
1056
- "platform": "ios",
1057
- "engine": "easyocr",
1058
- "processingTimeMs": 850,
1059
- "elementCount": 24,
1060
- "elements": [
1061
- { "text": "Settings", "confidence": 98, "tapX": 195, "tapY": 52 },
1062
- { "text": "Login", "confidence": 95, "tapX": 187, "tapY": 420 }
1063
- ]
1064
- }
1065
- ```
1066
-
1067
- Then tap the element:
1068
-
1069
- ```
1070
- tap with x=187 y=420
1071
- ```
1072
-
1073
- ### OCR Engine
1074
-
1075
- The tool uses EasyOCR (Python-based) for text recognition. It provides excellent accuracy on colored backgrounds and stylized text common in mobile UIs.
1076
-
1077
- ### EasyOCR Setup
1078
-
1079
- EasyOCR and all its Python dependencies (PyTorch, OpenCV, etc.) are installed automatically into an isolated virtual environment by the `node-easyocr` package — no need to run `pip install` manually. The only prerequisite is having Python 3.6+ available on your system:
1080
-
1081
- ```bash
1082
- # macOS
1083
- brew install python@3.11
1084
-
1085
- # Ubuntu/Debian
1086
- sudo apt install python3
1087
-
1088
- # Windows
1089
- # Download from https://www.python.org/downloads/
1090
- ```
1091
-
1092
- On the first OCR call, language models (~100MB for English) are downloaded automatically. This may take a moment, but subsequent calls use the cached models.
1093
-
1094
- ### OCR Language Configuration
1095
-
1096
- By default, OCR recognizes English text. To add more languages, set the `EASYOCR_LANGUAGES` environment variable. English is always included as a fallback.
1097
-
1098
- ```bash
1099
- # Add Spanish and French (English always included)
1100
- EASYOCR_LANGUAGES=es,fr
1101
- ```
1102
-
1103
- Add to your MCP configuration:
1104
-
1105
- ```json
1106
- {
1107
- "mcpServers": {
1108
- "rn-debugger": {
1109
- "command": "npx",
1110
- "args": ["react-native-ai-debugger"],
1111
- "env": {
1112
- "EASYOCR_LANGUAGES": "es,fr"
1113
- }
1114
- }
1115
- }
1116
- }
1117
- ```
1118
-
1119
- See [EasyOCR supported languages](https://www.jaided.ai/easyocr/) for the full list of language codes.
1120
-
1121
- ### Recommended Workflow
1122
-
1123
- 1. **Use unified `tap`** - Handles fallback chain automatically
1124
- 2. **Fall back to OCR** - When `tap` suggests using coordinates
1125
- 3. **Use screenshot** - For visual debugging or layout verification
1126
-
1127
- ```
1128
- # Simplest approach — tap handles everything
1129
- tap with text="Submit"
1130
-
1131
- # If tap fails, use OCR to find coordinates
1132
- ocr_screenshot with platform="android"
1133
-
1134
- # Then tap using coordinates from OCR result
1135
- tap with x=540 y=1200
1136
- ```
235
+ | Guide | Description |
236
+ | ---------------------------------------------------------- | ------------------------------------------------------------------------------- |
237
+ | [Console Logging](docs/logging.md) | `get_logs` parameters, filtering, summary mode, TONL format, token optimization |
238
+ | [Network Tracking](docs/network.md) | SDK setup for full capture, filtering, request details, statistics |
239
+ | [App Inspection](docs/app-inspection.md) | Debug globals (Apollo, Redux, Expo Router), `execute_in_app`, limitations |
240
+ | [Layout & Component Inspection](docs/layout-inspection.md) | `get_screen_layout`, component tree, `inspect_at_point`, `find_components` |
241
+ | [Device Interaction](docs/device-interaction.md) | Unified `tap`, platform-specific gestures, text input, key events |
242
+ | [OCR Text Extraction](docs/ocr.md) | Cloud Vision OCR, offline fallback, language config, workflows |
243
+ | [Claude Code Skills](docs/skills.md) | Pre-built skills for session setup, debugging, and automation |
244
+ | [Full Tool Reference](docs/tools.md) | Complete list of all 40+ tools with descriptions |
1137
245
 
1138
246
  ## Supported React Native Versions
1139
247
 
1140
- | Version | Runtime | Status |
1141
- | -------------- | ----------------------- | ---------- |
1142
- | Expo SDK 54+ | React Native Bridgeless | ✓ |
1143
- | RN 0.70 - 0.76 | Hermes React Native | ✓ |
1144
- | RN < 0.70 | JSC | Not tested |
248
+ | Version | Architecture | Engine | Status |
249
+ | -------------- | --------------------- | ------------ | ------------------------------------------------ |
250
+ | Expo SDK 54+ | Bridgeless (New Arch) | Hermes | ✓ Fully supported |
251
+ | RN 0.76+ | Bridgeless (New Arch) | Hermes | ✓ Fully supported |
252
+ | RN 0.73 - 0.75 | Bridge (Old Arch) | Hermes | ✓ Fully supported (best network capture via CDP) |
253
+ | RN 0.70 - 0.72 | Bridge (Old Arch) | Hermes / JSC | ✓ Supported |
254
+ | RN < 0.70 | Bridge | JSC | Not tested |
1145
255
 
1146
256
  ## How It Works
1147
257
 
1148
258
  1. Fetches device list from Metro's `/json` endpoint
1149
259
  2. Connects to the main JS runtime via CDP (Chrome DevTools Protocol) WebSocket
1150
260
  3. Enables `Runtime.enable` to receive `Runtime.consoleAPICalled` events
1151
- 4. Enables `Network.enable` to receive network request/response events
261
+ 4. Network capture via two paths:
262
+ - **With SDK**: Reads from the SDK's in-app buffer via `Runtime.evaluate` — captures all requests from startup with full headers and bodies
263
+ - **Without SDK**: Enables CDP `Network.enable` (on supported targets) or injects a JS fetch interceptor as fallback
1152
264
  5. Stores logs and network requests in circular buffers for retrieval
1153
265
 
1154
- ## Auto-Reconnection
266
+ ## Connection Management
1155
267
 
1156
- The server automatically handles connection interruptions:
268
+ ### Explicit Connection
1157
269
 
1158
- ### Auto-Connect on Startup
270
+ The server does **not** auto-connect on startup. Call `scan_metro` to discover and connect to Metro servers. This prevents multiple MCP server instances (from parallel agent sessions) from competing for the single CDP WebSocket slot, which would cause connection thrashing and dropped tools.
1159
271
 
1160
- When the MCP server starts, it automatically scans common Metro ports (8081, 8082, 19000-19002) and connects to any running Metro bundlers. No need to manually call `scan_metro` if Metro is already running.
272
+ ### Graceful Shutdown
273
+
274
+ When the MCP server process is terminated (`SIGINT`/`SIGTERM`), it closes all CDP WebSocket connections and cancels reconnection timers, freeing the CDP slot immediately for other sessions.
1161
275
 
1162
276
  ### Reconnection on Disconnect
1163
277
 
1164
278
  When the connection to Metro is lost (e.g., app restart, Metro restart, or network issues):
1165
279
 
1166
280
  1. The server automatically attempts to reconnect
1167
- 2. Uses exponential backoff: immediate, 500ms, 1s, 2s, 4s, 8s (up to 8 attempts)
281
+ 2. Uses exponential backoff: 500ms, 1s, 2s, 4s, 8s (up to 8 attempts)
1168
282
  3. Re-fetches device list to handle new WebSocket URLs
1169
283
  4. Preserves existing log and network buffers
1170
284
 
@@ -1195,8 +309,8 @@ Use `get_connection_status` to see detailed connection information:
1195
309
 
1196
310
  ### No devices found
1197
311
 
1198
- - Make sure the app is running on a simulator/device
1199
- - Check that Metro bundler is running (`npm start`)
312
+ - Make sure the app is running on a simulator/device
313
+ - Check that Metro bundler is running (`npm start`)
1200
314
 
1201
315
  ### Wrong device connected
1202
316
 
@@ -1208,41 +322,62 @@ The server prioritizes devices in this order:
1208
322
 
1209
323
  ### Logs not appearing
1210
324
 
1211
- - Ensure the app is actively running (not just Metro)
1212
- - Try `clear_logs` then trigger some actions in the app
1213
- - Check `get_apps` to verify connection status
325
+ - Ensure the app is actively running (not just Metro)
326
+ - Try `clear_logs` then trigger some actions in the app
327
+ - Check `get_apps` to verify connection status
1214
328
 
1215
- ## Telemetry
329
+ ## Telemetry & Data Collection
1216
330
 
1217
331
  This package collects anonymous usage telemetry to help improve the product. No personal information is collected.
1218
332
 
1219
333
  ### What is collected
1220
334
 
1221
- | Data | Purpose |
1222
- |------|---------|
1223
- | Tool names | Which MCP tools are used most |
1224
- | Success/failure | Error rates for reliability improvements |
1225
- | Duration (ms) | Performance monitoring |
1226
- | Session start/end | Retention analysis |
1227
- | Platform | macOS/Linux/Windows distribution |
1228
- | Server version | Adoption of new versions |
335
+ | Data | Purpose |
336
+ | ----------------- | ---------------------------------------- |
337
+ | Tool names | Which MCP tools are used most |
338
+ | Success/failure | Error rates for reliability improvements |
339
+ | Duration (ms) | Performance monitoring |
340
+ | Session start/end | Retention analysis |
341
+ | Platform | macOS/Linux/Windows distribution |
342
+ | Server version | Adoption of new versions |
1229
343
 
1230
344
  **Not collected**: No file paths, code content, network data, or personally identifiable information.
1231
345
 
1232
- ### Opt-out
346
+ ### Auto-registration
1233
347
 
1234
- To disable telemetry, set the environment variable:
348
+ On first tool use, the package automatically registers your installation with our backend. No account or login is required — the Tool works fully out of the box.
1235
349
 
1236
- ```bash
1237
- export RN_DEBUGGER_TELEMETRY=false
1238
- ```
350
+ **Why we do this:** The product roadmap includes features that build on installation identity — project memory (your AI assistant gets smarter with every session by remembering navigation maps, element signatures, and debug patterns), cloud sync across machines, team collaboration with shared debugging context, and a Pro dashboard for managing installations and subscriptions. Auto-registration lays the groundwork so these features work seamlessly when they ship, without requiring a disruptive setup step later.
1239
351
 
1240
- Or inline:
352
+ **What is sent:**
1241
353
 
1242
- ```bash
1243
- RN_DEBUGGER_TELEMETRY=false npx react-native-ai-debugger
354
+ - A random installation ID (UUID)
355
+ - A device fingerprint (one-way SHA-256 hash — cannot be reversed to recover its components)
356
+ - Platform, hostname, OS version, and server version
357
+
358
+ **What is NOT sent:** No source code, file paths, console logs, network data, component names, or any content from your app. The fingerprint exists solely to prevent installation hijacking — it ties your installation to your physical machine so no one else can claim it.
359
+
360
+ Registration is fire-and-forget — it never blocks your work, fails silently if the network is unavailable, and can be disabled entirely (see Opt-out below). See [PRIVACY.md](./PRIVACY.md) for full details on data handling, storage, and your rights.
361
+
362
+ ### Opt-out
363
+
364
+ To disable telemetry and auto-registration, add `RN_DEBUGGER_TELEMETRY` to the `env` field in your MCP server configuration:
365
+
366
+ ```json
367
+ {
368
+ "mcpServers": {
369
+ "rn-debugger": {
370
+ "type": "stdio",
371
+ "command": "npx",
372
+ "args": ["react-native-ai-devtools"],
373
+ "env": { "RN_DEBUGGER_TELEMETRY": "false" }
374
+ }
375
+ }
376
+ }
1244
377
  ```
1245
378
 
379
+ All debugging tools work normally with telemetry disabled. For the complete privacy policy, see [PRIVACY.md](./PRIVACY.md).
380
+
1246
381
  ## License
1247
382
 
1248
383
  MIT