Argent Metro Debugger
Debug a React Native app at runtime by attaching to Metro CDP, inspecting components, and reading console output on iOS or Android.
Overview
Argent Metro Debugger is an agent skill for the Ship phase that connects to Metro CDP to inspect React Native components, console logs, and in-app JavaScript on a chosen device.
Install
npx skills add https://github.com/software-mansion/argent --skill argent-metro-debuggerWhat is this skill?
- Connects to Metro dev server (default localhost:8081) and CDP targets via debugger-status verification
- debugger-* / network-* / react-profiler-* tools scoped by port and device_id (simulator UDID or Android serial)
- Documents adb reverse tcp:8081 for Android when Metro connection fails
- Targets the correct app per device when multiple simulators share one Metro port
Adoption & trust: 1.9k installs on skills.sh; 1.2k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are chasing a React Native bug in a running app and cannot see components, logs, or evaluated JS without a clear Metro CDP and device targeting workflow.
Who is it for?
Solo builders debugging React Native on simulators or Android devices with argent MCP debugger tools and Metro already in the loop.
Skip if: Teams that only need static code review, backend-only APIs, or apps that do not use Metro CDP (e.g. pure native without RN).
When should I use this skill?
When connecting to Metro, inspecting React components, reading console logs, or evaluating JavaScript in the app runtime.
What do I get? / Deliverables
Your agent verifies Metro and device readiness, applies Android port reverse when needed, and uses scoped debugger tools against the correct CDP target.
- Verified debugger-status and targeted CDP inspection session
- Console log and component inspection results for the chosen device_id
Recommended Skills
Journey fit
Runtime inspection and CDP debugging happen after the app is built and running—canonical shelf is Ship/review-style troubleshooting before release. Subphase review covers systematic debugging and inspection of running code rather than greenfield implementation.
How it compares
Use for live Metro CDP sessions instead of only reading source or rerunning builds without runtime inspection.
Common Questions / FAQ
Who is argent-metro-debugger for?
Indie and solo developers building React Native apps with argent who need agent-guided Metro CDP debugging on specific simulators or Android devices.
When should I use argent-metro-debugger?
During build when iterating on UI or JS behavior, and during ship when validating dev builds—when you need debugger-status, component inspection, console logs, or in-runtime evaluation.
Is argent-metro-debugger safe to install?
Review the Security Audits panel on this Prism page and treat debugger access as dev-only; it expects local Metro and device access via adb or simulators.
SKILL.md
READMESKILL.md - Argent Metro Debugger
## 1. Prerequisites The debugger 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`. ### 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: ```bash 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. One Metro port can serve multiple connected devices (e.g. two simulators on `localhost:8081`, or an iOS simulator alongside an Android emulator with `adb reverse` set up). `device_id` pins every debugger/network/profiler call to a specific device so sessions do not collide. ### Connect & diagnostics | Tool | Purpose | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `debugger-connect` | Connect to Metro CDP. Returns port, projectRoot, deviceName, appName, `logicalDeviceId`, isNewDebugger, connected. The returned `logicalDeviceId` is the `device_id` for every subsequent debugger/network/profiler call. | | `debugger-status` | Like connect + loadedScripts, enabledDomains, sourceMapReady. **Use to diagnose.** | ### Reload & recovery | Tool | Purpose | | ----------------------- | --------------------------------------------------------------------------------------------- | | `debugger-reload-metro` | Reload all connected apps (like pressing "r" in Metro terminal). Needs a CDP target. | | `restart-app` | Terminate and relaunch the app by device id and bundleId. Use when app lost Metro connection. | ### Inspection & console | Tool | Purpose | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `debugger-component-tree` | Full React fiber tree (names, depth, bounding rects, tap coordinates). | | `debugger-inspect-element` | Inspect at (x, y) using **logical pixel coordinates** (not normalized 0-1): component hierarchy with source file:line and code fragment. See `