skills.rest
TrainLCD
TrainLCDOFFICIAL
Explore all skills by this author →
Website𝕏@trainlcdGitHub

argent-metro-debugger

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
One-click install
npx skills add https://github.com/TrainLCD/MobileApp --skill argent-metro-debugger-trainlcd
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
softwarebyzesoftwarebyze

argent-metro-debugger

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

Community
Advanced
mvillmowmvillmow
18

analyze-ci-failure-logs

Analyze CI failure logs to identify root causes and error patterns.

Community
Intermediate
lciaccilciacci

react-native

Build maintainable React Native components and screens with TypeScript, hooks, and tests.

Community
Intermediate
tkerseytkersey
66

web-browser

Automate Chrome/Chromium via CDP to navigate, click, fill forms, evaluate JavaScript, and capture screenshots.

Community
Intermediate