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.
How to use
- Navigation inside
Node Inspector Components Highlighting
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.