|
| 1 | +--- |
| 2 | +title: Using rn-dev-agent with React Native DevTools |
| 3 | +description: Stop the CDP bridge from kicking React Native DevTools off the debugger seat, and what happened to the __RN_NET__ console spam. |
| 4 | +--- |
| 5 | + |
| 6 | +import { Aside } from '@astrojs/starlight/components'; |
| 7 | + |
| 8 | +You open React Native DevTools and it immediately disconnects with **"Disconnected due to opening a second DevTools window"**. Or your Metro logs are full of `__RN_NET__:request:{...}` lines. Both come from the rn-dev-agent CDP bridge — and both are fixed. This page explains what's happening and how to configure it. |
| 9 | + |
| 10 | +## Why DevTools gets kicked |
| 11 | + |
| 12 | +React Native allows **exactly one debugger frontend** per app (on RN versions before dev-middleware learned to multiplex frontends). The rn-dev-agent bridge and the visual React Native DevTools window connect to the *same* `/inspector/debug` slot, so they evict each other — whoever connects last wins. |
| 13 | + |
| 14 | +By default the bridge is **agent-first**: after any disconnect it auto-reconnects in the background (instant first retry, then a 5-second poll). So the moment you open DevTools, the bridge re-grabs the seat and your DevTools window gets kicked. You never had a chance. |
| 15 | + |
| 16 | +## The fix: turn off background auto-reconnect |
| 17 | + |
| 18 | +Two equivalent opt-out surfaces — the environment variable wins if both are set: |
| 19 | + |
| 20 | +**Environment variable** (set where the MCP server starts, e.g. in your shell profile or the Claude Code MCP env): |
| 21 | + |
| 22 | +```bash |
| 23 | +RN_CDP_AUTOCONNECT=0 # also accepts 'false'; '1'/'true' force the default back on |
| 24 | +``` |
| 25 | + |
| 26 | +**Project config file** — `.rn-agent/config.json` in your React Native project root: |
| 27 | + |
| 28 | +```json |
| 29 | +{ "cdp": { "autoConnect": false } } |
| 30 | +``` |
| 31 | + |
| 32 | +With either set, the bridge runs in **passive mode**: after a disconnect it stays down instead of re-grabbing the seat. Open React Native DevTools and it keeps the connection — Console, Network, Components, Profiler all work. |
| 33 | + |
| 34 | +## What passive mode does and doesn't change |
| 35 | + |
| 36 | +- **Disabled:** all *background* reconnection — the close-triggered reconnect loop and the 5-second background poll. The bridge never takes the seat behind your back. |
| 37 | +- **Unchanged:** on-demand connection. When the agent actually runs a CDP tool (`cdp_status`, `cdp_component_tree`, …), the bridge connects for that work — which **does** evict your DevTools window at that moment. That's deliberate: a tool call is a visible, foreground action. Once you reopen DevTools afterwards, the bridge yields again. |
| 38 | +- **Unchanged:** `device_*` tools (taps, screenshots, fills). They don't touch the debugger connection at all — use them freely while DevTools is open. |
| 39 | + |
| 40 | +<Aside type="tip" title="Rule of thumb"> |
| 41 | +Passive mode means: *the bridge holds the debugger seat only while the agent is actively working.* If you want uninterrupted DevTools time, just don't run `cdp_*` tools meanwhile. |
| 42 | +</Aside> |
| 43 | + |
| 44 | +You can always see the resolved mode in `cdp_status` → top-level `autoConnect` field (`{ enabled, source: 'env' | 'config' | 'default' }`), and `/rn-dev-agent:doctor` reports it as the **CDP auto-reconnect** row (YELLOW when off — informational, not an error). |
| 45 | + |
| 46 | +**Known limitation:** a DevTools-sharing proxy started with `cdp_open_devtools` is not auto-resumed after a disconnect in passive mode — re-run `cdp_open_devtools` if you use that flow. |
| 47 | + |
| 48 | +## The `__RN_NET__` console spam is gone |
| 49 | + |
| 50 | +Unrelated knob, same release: on React Native < 0.83 the bridge falls back to in-app `fetch`/XHR wrappers for network capture, and these used to transport every request/response as a `console.log('__RN_NET__:…')` line — invisible to the bridge (it filters them) but spamming Metro logs and your DevTools console. |
| 51 | + |
| 52 | +That transport is replaced: entries now go to an in-app ring buffer (`globalThis.__RN_AGENT_NET_BUF__`, capped at 100) that the network tools drain on demand. **No configuration needed** — update the plugin and the console noise disappears while `cdp_network_log` keeps working. |
| 53 | + |
| 54 | +## Quick reference |
| 55 | + |
| 56 | +| I want… | Do this | |
| 57 | +|---|---| |
| 58 | +| DevTools to stay connected while the agent is idle | `RN_CDP_AUTOCONNECT=0` or `.rn-agent/config.json` → `{ "cdp": { "autoConnect": false } }` | |
| 59 | +| The agent-first default back | Remove the override, or `RN_CDP_AUTOCONNECT=1` | |
| 60 | +| To check which mode is active | `cdp_status` → `autoConnect`, or `/rn-dev-agent:doctor` | |
| 61 | +| No `__RN_NET__` lines in my console | Nothing — fixed automatically as of this release | |
0 commit comments