argent-metro-debugger

Name: argent-metro-debugger
Availability: InStock
Author: TrainLCD

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

71|2|Updated Oct 26, 2019

Search Tags:#debugging #cdp #react-native #mobile-development #metro #runtime-analysis

Ready to run

npx skills add https://github.com/TrainLCD/MobileApp --skill argent-metro-debugger-trainlcd

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: argent-metro-debugger
Source: https://github.com/TrainLCD/MobileApp/tree/main/.agents/skills/argent-metro-debugger
Command: npx skills add https://github.com/TrainLCD/MobileApp --skill argent-metro-debugger-trainlcd

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill resolves the complexity of debugging mobile and web runtimes by providing a unified interface to inspect React Native components, evaluate JavaScript, and analyze console logs across iOS, Android, Vega, and Chromium environments.

Core Features & Use Cases

Runtime Inspection: Connect to Metro or CDP targets to inspect component trees, evaluate expressions, and trace elements to their source files.
Diagnostic Logging: Aggregate and filter console logs to identify errors and performance bottlenecks in real-time.
Workflow Recovery: Automate the reconnection of apps to Metro and handle common environment failures like missing source maps or disconnected targets.

Quick Start

Use the argent-metro-debugger skill to connect to the running React Native app and retrieve the current component tree for inspection.

Frequently Asked Questions about argent-metro-debugger

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

FAQPage Schema

How do I inspect a React Native component tree during debugging?▼

You can inspect a React Native component tree by connecting to an active Metro or CDP target. This allows you to evaluate expressions, trace elements to source files, and navigate the component hierarchy across mobile platforms.

Can I debug Chromium-based mobile applications using Chrome DevTools Protocol?▼

Yes, you can debug Chromium-based applications using the Chrome DevTools Protocol. It provides a unified interface to inspect runtimes, evaluate JavaScript, and analyze console logs across iOS, Android, Vega, and Chromium environments.

What is the best way to aggregate and filter console logs for React Native runtime analysis?▼

The best way to aggregate console logs for runtime analysis is using a diagnostic interface that connects to Metro. It filters logs in real-time to identify errors and performance bottlenecks during mobile development.

Why does my Metro debugger disconnect when missing source maps during React Native debugging?▼

Missing source maps cause Metro debugging failures because the runtime cannot resolve accurate code tracing. The debugger handles this by automating app reconnection and managing common environment failures like disconnected targets.

Do I need an active Metro connection to trace elements to their source files?▼

Yes, an active Metro or CDP connection is required to trace elements to their source files. This connectivity ensures source map resolution for accurate code tracing and component tree analysis across diverse mobile platforms.