Parallax

Inspector and pick

Select an element on the live screen, see its component, file and props, and send it to the agent.

Pick is how you point at something on the screen and tell the agent about it, without describing it in words.

Pick an element

  1. In the toolbar, switch the pointer mode from Interact to Select element.
  2. Click the element on the live screen.
  3. The Device panel's Inspector tab shows what you picked.

The Inspector shows:

  • the component's name, and its file and line (with the build plugin); Open in editor jumps there;
  • the owner chain, from the app's root to the picked element, with library components collapsed (··· N expands them);
  • the touched view's frame, its testID (marked when it is inherited from the nearest ancestor that has one) and its native tag;
  • the props, with secrets shown as redacted.

Pick reads React's component tree through the debugger. Where that cannot work, it falls back to the accessibility tree and says so ("Reduced precision": views without a testID or a label cannot be selected).

One debugger per app

On a Metro that allows only one debugger per app, picking with React Native's own inspector would disconnect React Native DevTools. Parallax does not connect on its own. The Inspector shows the accessibility reading and a Connect anyway button that disconnects DevTools if you press it.

Open in editor

Open in editor asks Metro to open the file in the editor its environment names (EDITOR or REACT_EDITOR). To use a specific command instead, set PARALLAX_EDITOR_COMMAND to a JSON array: the program, then its arguments, with {file} and {line} where they go, for example ["code","--goto","{file}:{line}"]. Only files inside the project are opened.

Send it to the agent

Once an element is picked, a chip with its testID and file appears in the composer. Write a line and press Send to agent: the agent gets your text and the element with its file. You can attach an error from the Errors tab or a request from the Network tab the same way. See The desktop app for what happens to the message.

The agent's side

The agent does the same mapping without a click: device_ui finds an element by id, label or text, and app_tree with that id as filter returns the component and file. An exact match wins over a partial one. When several different nodes match, the answer is marked AMBIGUOUS and lists them with the components they are in; it never resolves silently.

The tree lists mounted components, not what is visible: a screen of another tab that stays mounted is in it too. It was checked on React Native 0.85 to 0.87 with React 19.2.3; on other versions it may show ? nodes or say "unchecked" while still answering.

On this page