skills.rest
software-mansion
software-mansionOFFICIAL
Explore all skills by this author →
Website𝕏@swmansionGitHub

argent-metro-debugger

Debugs React Native apps via Metro and CDP connections.

1.9k|65|Updated Feb 23, 2026
Search Tags:#log analysis#react native#metro#source maps#component inspection#cdp debugging#runtime evaluation
One-click install
npx skills add https://github.com/software-mansion/argent --skill argent-metro-debugger-software-mansion
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: argent-metro-debugger
Source: https://github.com/software-mansion/argent/tree/main/packages/skills/skills/argent-metro-debugger
Command: npx skills add https://github.com/software-mansion/argent --skill argent-metro-debugger-software-mansion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you debug React Native issues by connecting directly to the Metro bundler through Metro CDP so you can inspect component structure, read console output, and evaluate JavaScript at runtime.

Core Features & Use Cases

  • Metro CDP connection & diagnostics: Connects to Metro, discovers loaded scripts and enabled domains, and helps you recover when connections or CDP targets are missing.
  • React component inspection: Retrieves a React fiber/component tree and inspects an on-screen element to trace it back to source (when source maps are available).
  • Runtime introspection: Reads structured console/log summaries and evaluates JavaScript expressions in the connected app runtime.

Quick Start

Connect your Metro dev server and then ask your assistant: “Use argent-metro-debugger to run debugger-status, connect to Metro, and inspect the component at the point my user is tapping.”

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 React Native components through Metro at runtime?▼

React Native component inspection works by connecting to the Metro bundler via CDP to retrieve the component tree and trace on-screen elements back to source code when source maps are available.

Can I evaluate JavaScript expressions inside a running React Native app?▼

Yes, JavaScript evaluation is possible by connecting to the Metro dev server via CDP and executing expressions directly within the connected React Native app's runtime environment.

How do I read and analyze React Native console logs from Metro?▼

You can read structured console log summaries by accessing the log registry through a Metro CDP connection, allowing you to investigate runtime behavior and diagnose React Native app issues.

What do I need to connect to Metro for CDP debugging?▼

You need a Metro dev server running on a specific port and a connected CDP target with a device ID to establish a connection for component inspection and runtime evaluation tasks.

Why is my Metro CDP connection not finding any debuggable targets?▼

If your Metro CDP connection is missing debuggable targets, you can use connection diagnostics to check status, discover loaded scripts, and recover when CDP targets are not found.

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
FilenCloudDiensteFilenCloudDienste
34

argent-metro-debugger

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

Official
Advanced
TrainLCDTrainLCD
71

argent-metro-debugger

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

Official
Advanced
BabakBarBabakBar

Mobile Debugging

Diagnose React Native and Expo issues with Bash, Read, and Grep workflows.

Community
Advanced