This feature helps you examine how LiveComponents are arranged in your debugged LiveView. It identifies the structure based on state of LiveView processes. LiveDebugger listens on state changes and refreshes your Components Tree.

The root of the tree is LiveView and children are LiveComponents with their CIDs (`Phoenix.LiveComponent.CID`). When there are many elements, the tree will be collapsed appropriately.

<div style="display: flex; justify-content: center;">
<img src="images/components_tree.png" alt="Components Tree" height="400px">
</div>

## How to use

- Navigation inside `Node Inspector`
- [`Components Highlighting`](components_highlighting.md)

### Conditional LiveComponents

Components Tree helps you discover adding and removing of conditionally rendered LiveComponents.

### Nested LiveViews

Nested LiveViews are not shown inside Components Tree since they are separate processes which you can debug - they're displayed as a separate tree.

If you are debugging nested LiveView you can return to parent by _Parent LiveView Process_ link shown in Sidebar.