DevTools

提供视口数据、每个节点状态并记录更改事件的调试工具。此组件基于高级使用下的 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.

你可以导入整个 <DevTools /> 组件，也可以选择导入单个组件以获得更大的灵活性。这些组件包括：

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

• <ViewportLogger /> 组件显示视口的当前位置和缩放级别。

  ¥A <ViewportLogger /> component that shows the current position and zoom level of the viewport.

• 显示每个节点状态的 <NodeInspector /> 组件。

  ¥A <NodeInspector /> component that reveals the state of each node.

• <ChangeLogger /> 封装流的 onNodesChange 处理程序并在分派时记录每个更改。

  ¥A <ChangeLogger /> that wraps your flow’s onNodesChange handler and logs each change as it is dispatched.

你可以在 DevTools 和调试 上阅读有关各个组件的更多信息。虽然我们发现这些工具对于确保 React Flow 正常工作很有用，但你可能还会发现它们对于调试你的应用很有用，因为你的流程及其交互变得更加复杂。

¥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.

npx shadcn@latest add https://ui.reactflow.dev/devtools

pnpm dlx shadcn@latest add https://ui.reactflow.dev/devtools

yarn dlx shadcn@latest add https://ui.reactflow.dev/devtools

bun x shadcn@latest add https://ui.reactflow.dev/devtools

import { Background, ReactFlow } from "@xyflow/react";
 
import { DevTools } from "@/registry/components/devtools/";
 
const defaultNodes = [
  {
    id: "1a",
    type: "input",
    data: { label: "Node 1" },
    position: { x: 250, y: 5 },
  },
];
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} fitView>
        <Background />
        <DevTools position="top-left" />
      </ReactFlow>
    </div>
  );
}