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
Decision gist · record as of 2026-07-27
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.
Use it when
- argent-metro-debugger allows you to inspect React component trees and trace elements to their source files on iOS simulators.
- argent-metro-debugger works with Android emulators to provide comprehensive debugging for Metro-based React Native apps.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
software-mansion/argent/argent-metro-debugger · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Debug React Native apps running on Metro by inspecting components and console logs”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
argent-react-native-profiler is a performance analysis tool for React Native developers who need to diagnose and resolve app slowdowns. It captures CPU usage and rendering metrics to pinpoint inefficiencies in your codebase. Use it to systematically improve frame rates, reduce jank, and deliver faster, smoother mobile experiences.
Argent Native Profiler gives you deep visibility into your app's native layer performance across iOS and Android platforms. Pinpoint CPU, memory, and threading issues that slow down user experience, then use detailed diagnostics to eliminate bottlenecks and improve responsiveness.
This skill handles the complete setup and boot sequence for iOS simulators, whether you're preparing a fresh environment or starting a new session. It streamlines the configuration process so you can begin testing immediately without manual initialization steps.
This skill enables iOS applications to efficiently route Model Context Protocol (MCP) messages and coordinate request handling across device components. It provides the infrastructure needed to manage bidirectional communication patterns and ensure reliable message delivery in mobile environments.
This skill enables automated UI testing by orchestrating interact-screenshot-verify cycles, letting you capture application state and validate outcomes programmatically. Build reliable test workflows that reduce manual verification overhead and accelerate quality assurance cycles.
argent-device-interact enables developers to script and automate user interface interactions across multiple platforms—iOS simulators, Android emulators, and Chromium-based applications. Built by Software Mansion, this tool provides programmatic control over device interactions, making it ideal for testing workflows, UI automation, and cross-platform application validation.
More skills argent-android-emulator-setup (Apache-2.0) · Cometchat Native Calls (unlicensed) · Cometchat Native Bare Patterns (unlicensed)