Skip to main content
Glama

debugger-component-tree

Fetch a compact component tree of a React Native screen with normalized tap coordinates to identify UI elements for interaction.

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:

  1. Call this tool to get the component tree.

  2. Find the desired element by name, text, testID, or accessibilityLabel.

  3. 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

TableJSON Schema
NameRequiredDescriptionDefault
portNoMetro server port
maxNodesNoMaximum 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_idYesDevice id from list-devices — the SAME id you passed to debugger-connect (iOS simulator UDID or Android serial).
onScreenOnlyNoWhen 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.
includeSkippedNoWhen 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.
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Discloses pruning of off-screen components, normalized coordinates in [0,1], and failure condition (Metro debugger not connected). No annotations exist, so description carries full burden—adequate but could mention potential performance impact or other constraints.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Information is front-loaded with clear structure including workflow steps. Some redundancy (last sentence echoes earlier points), but overall efficient and well-organized.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Covers tool purpose, output format (text tree with coordinates), workflow, and failure case. No output schema needed as description explains what is returned. Adequate for a read-only diagnostic tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% and all parameters are well-described in the schema. Description reinforces usage context (e.g., includeSkipped) but does not add significant new meaning beyond what schema already provides.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description clearly states it fetches the current screen as a compact component text tree with tap coordinates, distinguishes from siblings by being the preferred element discovery tool for React Native apps, and notes pruning behavior.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Provides a detailed workflow and explicit use case (getting tap coordinates), advises re-calling after navigation/state changes, and mentions includeSkipped option. Lacks explicit when-not-to-use or comparison to all alternatives but is clear overall.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/software-mansion/argent'

If you have feedback or need assistance with the MCP directory API, please join our Discord server