DevTools

A debugging tool that provides data on the viewport, the state of each node, and logs change events. This component is based on DevTools and Debugging under Advanced Use.

You can import the entire <DevTools /> component, or optionally, import individual components for greater flexibility. These components include:

• A <ViewportLogger /> component that shows the current position and zoom level of the viewport.
• A <NodeInspector /> component that reveals the state of each node.
• A <ChangeLogger /> that wraps your flow’s onNodesChange handler and logs each change as it is dispatched.

You can read more about the individual components at DevTools and Debugging. While we find these tools useful for making sure React Flow is working properly, you might also find them useful for debugging your applications as your flows and their interactions become more complex.