rn-cdp-bridge

Streams React Native console logs and network requests to the terminal via CDP WebSocket.

1|Updated Mar 18, 2026
One-click install
npx skills add https://github.com/psw7205/skills --skill rn-cdp-bridge-psw7205
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rn-cdp-bridge
Source: https://github.com/psw7205/skills/tree/main/skills/rn-cdp-bridge
Command: npx skills add https://github.com/psw7205/skills --skill rn-cdp-bridge-psw7205

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ws, node-fetch, and includes scripts (resource) and references (resource) components.

What problem does it solve? React Native 0.77+ removed Metro log forwarding, so console.log output no longer appears in the Metro terminal. This Skill restores that visibility by bridging the Chrome DevTools Protocol (CDP) WebSocket exposed by Metro's InspectorProxy, streaming console output, exceptions, and network requests directly to your terminal. ## Core Features & Use Cases - Console Log Recovery: Streams Runtime.consoleAPICalled events (log/warn/error) from the Hermes runtime to the terminal with level colors and source locations. - Network Monitoring: Optional --network flag captures HTTP request/response/failure events via the CDP Network domain. - Crash Diagnosis: Guides switching from release builds (where Hermes minification breaks stack symbolication) to debug builds with Metro, adb reverse, and permission pre-granting so RedBox/LogBox and CDP reveal exact errors. - Use Case: Your RN 0.77 app silently fails when navigating to a screen. Run the bridge script, reproduce the navigation, and see the exact console.error with component stack or the unhandled NAVIGATE action in your terminal. ## Quick Start Ask the AI to run the cdp-console bridge script against Metro on port 8081 and show my React Native app's console logs and network requests in the terminal.

Frequently Asked Questions about rn-cdp-bridge

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I see console.log in React Native 0.77 Metro terminal?▼

Metro log forwarding was removed in RN 0.77, so connect to the CDP WebSocket instead. Run the cdp-console.mjs bridge script, which discovers the target via http://localhost:8081/json/list and streams Runtime.consoleAPICalled events to your terminal.

How to monitor network requests in React Native from the terminal?▼

Run the bridge script with the --network flag to enable the CDP Network domain. It prints requestWillBeSent, responseReceived, and loadingFailed events with method, URL, and status code for each HTTP call.

Why is my React Native release build crash stack unreadable?▼

Release builds use Hermes bytecode with minification, so index.bundle offsets cannot be symbolicated by Metro sourcemaps. Install the debug APK, run adb reverse tcp:8081, and reproduce the crash to get the exact error via RedBox and the CDP stream.

Does CDP debugging work with Expo or multiple devices?▼

Yes, Expo SDK 50+ uses port 8081 like RN CLI (SDK 49 and earlier use 19000-19002). When multiple RN targets appear, pass --target with a device name or package name substring to attach to the correct app.

Why does the CDP connection fail when Flipper is running?▼

Flipper preempts the WebSocket debugging channel, blocking other CDP clients. Close Flipper and retry; also note chrome://inspect no longer works in RN 0.76+, so use the Metro j key or /open-debugger for the GUI.

What are the limitations of Hermes CDP Runtime.evaluate?▼

Hermes CDP does not support async/await syntax, so write Promise chains with .then() and set awaitPromise: true. The require and global objects are unavailable; use globalThis instead, and note Network.getResponseBody is experimental.