skills.rest
FilenCloudDienste
FilenCloudDiensteOFFICIAL
Explore all skills by this author →
Website𝕏@filen_ioGitHub

argent-metro-debugger

Debug React Native apps via Metro CDP for component and console inspection.

34|2|Updated Aug 16, 2025
Search Tags:#log analysis#debugger#react native#source maps#component inspection#metro cdp#android adb reverse
One-click install
npx skills add https://github.com/FilenCloudDienste/filen-ts --skill argent-metro-debugger-filenclouddienste
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: argent-metro-debugger
Source: https://github.com/FilenCloudDienste/filen-ts/tree/main/.claude/skills/argent-metro-debugger
Command: npx skills add https://github.com/FilenCloudDienste/filen-ts --skill argent-metro-debugger-filenclouddienste

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you diagnose and fix React Native issues by inspecting the live runtime—components, source locations, and console output—while the app is connected to Metro CDP.

Core Features & Use Cases

  • Metro CDP connection & diagnostics: Connect to Metro and check loaded scripts, enabled domains, and source map readiness to quickly confirm the debugging pipeline is healthy.
  • Component inspection & source tracing: View the React fiber component tree and inspect a specific on-screen element to locate where it is defined in your code.
  • Runtime console log analysis: Retrieve a log registry summary, then grep or read the underlying flat log file to pinpoint relevant errors or events.
  • Developer iteration support: Reload the JS bundle via Metro or restart the app when CDP targets disappear or the connection breaks.

Quick Start

Run debugger-status to confirm Metro is reachable and a CDP target is available, then connect with debugger-connect before inspecting components or reading logs.

Frequently Asked Questions about argent-metro-debugger

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

FAQPage Schema
How do I debug a React Native app through Metro CDP?▼

To debug a React Native app through Metro CDP, run debugger-status to confirm the dev server is reachable, then use debugger-connect to inspect the live React component tree, console logs, and JavaScript evaluation.

Can I inspect React Native source maps during runtime debugging?▼

Yes, runtime debugging supports source maps by inspecting the React fiber component tree and tracing specific on-screen elements back to their exact source locations in your code.

How do I troubleshoot Metro connectivity when the CDP target disappears?▼

To troubleshoot Metro connectivity when a CDP target disappears, run debugger-status first to check the connection, then use restart-app or reload the JS bundle via Metro to re-establish the debugging pipeline.

What is the best way to analyze React Native console logs from Metro?▼

The best way to analyze React Native console logs is to retrieve a log registry summary, then grep or read the underlying flat log file to pinpoint specific runtime errors or relevant application events.

Do I need Android ADB reverse to use the Metro debugger?▼

Android ADB reverse may be required for correct device targeting via logicalDeviceId or device_id, ensuring the Metro dev server is available and the CDP connection can be established for runtime inspection.

Related Skills

Explore More Software Engineering Skills→
software-mansionsoftware-mansion
1.9k

argent-android-emulator-setup

Boot an Android AVD and configure adb reverse for Metro connectivity.

Official
Intermediate
software-mansionsoftware-mansion
1.9k

argent-metro-debugger

Debugs React Native apps via Metro and CDP connections.

Official
Advanced
TrainLCDTrainLCD
71

argent-metro-debugger

Inspect React Native component trees and console logs via Chrome DevTools Protocol.

Official
Advanced
softwarebyzesoftwarebyze

argent-metro-debugger

Debug React Native apps via Metro CDP for UI, logs, and JavaScript.

Community
Advanced