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

Ready to run

npx skills add https://github.com/software-mansion/argent --skill argent-metro-debugger-software-mansion

💬 Prompt for ChatGPT / Claude Chat▼

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.