Go to the Google Chrome Store, search for deValtio and click "add to Chrome”. Open a project in your favorite IDE and start the project.
Once the project is up and running in the browser, open up the inspector and click on the deValtio tab. When state changes within your application, a message is sent to deValtio notifying the application of that change and a “snapshot” will be created of the react fiber tree reflecting the change. The developer is able to click on a snapshot to view the application's state at the time the snapshot was taken. The snapshot is sent across the application to the extension's 4 features: State Diff, Component Graph, Component Tree and Proxy Network.
As the state of the application changes, State Diff visualizes the difference in state from one snapshot to the next. When the React Fiber Tree changes, a message is emitted to deValtio. When this message is received, a new snapshot is created. Each snapshot is an image of the fiber tree at the moment the snapshot was taken. State Diff allows the developer to switch back and forth between snapshots and view the DOM/state at the time the snapshot was taken.
The Component Graph is a hierarchical representation of the React Fiber Tree. Each node in the tree represents a fiber tree node. When the mouse hovers over the node, the name, children, and state of the component are displayed in a tooltip. Component Graph is collapsible to allow the developer to focus only on the area of the tree they want to see.
Like the Component Graph, the Component Tree is also a visualization of the React Fiber Tree. The Component Tree is displayed as a collapsible, text-based nested object. Each object represents a fiber tree node and displays the name, children, tag, state and props of the fiber tree node.
