argent-metro-debugger
This skill equips you with powerful debugging capabilities for React Native applications built on the Metro bundler. Inspect component hierarchies, trace execution flows, and monitor console output in real time to identify and fix issues faster. Perfect for developers who need deeper visibility into their Metro-based projects.
argent-metro-debugger enables you to debug React Native apps running on Metro by connecting via Chrome DevTools Protocol (CDP). The skill lets you inspect components, view console logs in real time, and trace execution flows. You can connect to your Metro bundler instance, examine the React component tree, and identify issues faster with deeper visibility into your app's runtime behavior.
AI-generated summary based on this skill's SKILL.md
Install
software-mansion/argent/argent-metro-debugger · repository language: TypeScript
git clone https://github.com/software-mansion/argent
cp -r argent/packages/skills/skills/argent-metro-debugger ~/.claude/skills/argent-metro-debuggerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I debug a React Native app with Metro?
argent-metro-debugger enables you to debug React Native apps running on Metro by connecting via Chrome DevTools Protocol (CDP). The skill lets you inspect components, view console logs in real time, and trace execution flows. You can connect to your Metro bundler instance, examine the React component tree, and identify issues faster with deeper visibility into your app's runtime behavior.
How can I inspect React components on an iOS simulator?
argent-metro-debugger allows you to inspect React component trees and trace elements to their source files on iOS simulators. Connect your simulator to the debugger, and you'll gain access to the component hierarchy, enabling you to examine props, state, and DOM structure. This helps you understand how your components render and interact.
What is the Metro debugger for Android emulator?
argent-metro-debugger works with Android emulators to provide comprehensive debugging for Metro-based React Native apps. You can inspect components, monitor console logs, and evaluate JavaScript expressions directly in the running app. The skill handles Metro connection setup and lets you diagnose runtime issues on your emulated Android device.
How do I connect to and diagnose a JS runtime via CDP?
argent-metro-debugger connects to your JavaScript runtime using Chrome DevTools Protocol (CDP), enabling deep inspection and diagnostics. Once connected, you can evaluate JavaScript expressions, manage app lifecycle on connected devices, and access detailed runtime information. This approach works across Metro, Chromium, Electron, and other CDP-compatible environments.
Can argent-metro-debugger debug Electron and Chromium apps?
Yes, argent-metro-debugger supports debugging Chromium and Electron applications via CDP, as well as Vega Fire TV apps. The skill's CDP connection capability extends beyond Metro to any environment that implements Chrome DevTools Protocol, giving you consistent debugging tools across multiple platforms and runtimes.
What does argent-metro-debugger help me accomplish?
argent-metro-debugger equips you with powerful debugging capabilities for React Native applications built on Metro. Inspect component hierarchies, trace execution flows, and monitor console output in real time to identify and fix issues faster. It's perfect for developers who need deeper visibility into their Metro-based projects through component inspection and runtime diagnostics.
SKILL.md
rendered from the published skill — quoted content, verbatim
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 Vega (Fire TV): requires a Debug .vpkg (a Release build never attaches) and Metro reachable from the device (vega device start-port-forwarding --port 8081 --forward false). Verify via debugger-status. debugger-component-tree, debugger-inspect-element, debugger-reload-metro and the react-profiler-* / profiler-* tools are unavailable there — see the argent-tv-interact skill.
For Chromium (CDP): requires a Chromium/CDP app
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
packages/skills/skills/argent-metro-debugger/SKILL.md
packages/skills/skills/argent-metro-debugger/references/failure-scenarios.md
packages/skills/skills/argent-metro-debugger/references/source-maps.md