argent-metro-debugger

SKILL.md

1. Prerequisites

For React Native (iOS / Android): requires Metro dev server running (default localhost:8081) and a React Native app connected to Metro (at least one CDP target). Verify via debugger-status.

For Chromium (CDP): requires a Chromium/CDP app already available — an Electron app booted via boot-device with electronAppPath, or any Chromium browser exposing a CDP port (auto-discovered by list-devices on 9222 / ARGENT_CHROMIUM_PORTS). The debugger re-uses the page CDP session — port is ignored, device_id is the chromium-cdp-<port> value from list-devices / boot-device. Only debugger-connect, debugger-status, debugger-evaluate, debugger-log-registry, view-network-logs, and view-network-request-details work on Chromium (the latter two read the browser's native CDP Network recording for the active tab instead of the Metro-injected fetch interceptor); debugger-component-tree, debugger-reload-metro, debugger-inspect-element, and the react-profiler-* / profiler-* tools are RN-only and reject Chromium at the capability gate with Tool 'X' is not supported on chromium app.

Android: reverse port for Metro

Android emulators and physical devices do not resolve the host's localhost by default. Before the RN app can reach Metro, forward port 8081 (or whichever port Metro is on) from the device back to the host:

adb -s <serial> reverse tcp:8081 tcp:8081

<serial> is the Android serial from list-devices. Once reversed, the app on the device connects to Metro just like an iOS simulator does, and all debugger-* / network-* / react-profiler-* tools work unchanged. If the device restarts or adb drops, re-run the command. A failing Metro connection on Android almost always means adb reverse has not been done or has been lost.

2. Tool Overview

All tools accept port (default 8081) AND device_id (the iOS Simulator UDID or Android serial, a.k.a. logicalDeviceId — the CDP-reported id that matches the device). Always make sure you target the correct app on the correct device.