debugger-component-tree
Inspect a React Native app's current screen as a compact component tree with normalized tap coordinates. Use it to identify UI elements and obtain precise interaction points.
Instructions
Fetch the current screen of a running React Native app as a compact component text tree. Only shows on-screen components with unique positions — off-screen (scrolled) content, full-screen transparent wrappers, and implementation-detail components are pruned.
Each visible component is listed with its name, text content, and normalized tap coordinates in [0,1] space (fractions of the screen, not pixels — same space as tap/swipe/gesture).
This is the preferred element discovery tool for React Native apps. More information in argent-react-native-app-workflow skill.
Workflow:
Call this tool to get the component tree.
Find the desired element by name, text, testID, or accessibilityLabel.
Use the (tap: x,y) coordinates directly with the tap tool.
Call again after navigation or state changes since positions may shift. Set includeSkipped=true to see a summary of all filtered components. Use when you need tap coordinates for a React Native UI element. Returns a compact text tree with (tap: x,y) coords. Fails if Metro debugger is not connected.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| port | No | Metro server port | |
| maxNodes | No | Maximum total nodes to include. When exceeded, intermediate single-child wrapper chains are collapsed to preserve both root structure and leaf elements. Default: no limit. | |
| device_id | Yes | Device logicalDeviceId from debugger-connect (iOS simulator UDID or Android logicalDeviceId). | |
| onScreenOnly | No | When true (default), only components visible on screen are returned. Set to false to include all mounted components including those scrolled off-screen. Useful when you need to understand the full page structure. | |
| includeSkipped | No | When true, appends a summary of all filtered components: total fiber count, JS-side skip counts by name, and TS-side filter pass removals. Useful for understanding what was pruned from the tree. |