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 /> 组件，用于显示视口的当前位置和缩放级别。
一个 <NodeInspector /> 组件，用于显示每个节点的状态。
一个 <ChangeLogger />，它封装了你的流的 onNodesChange 处理器，并在每次分发更改时记录该更改。

你可以在开发工具与调试中阅读关于各个组件的更多信息。虽然我们发现这些工具对于确保 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.

Dependencies:

@xyflow/react shadcn/ui/toggle-group

安装

在安装组件之前，务必遵循先决条件。


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

用法

1. Connect the component with your React Flow application.


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>
  );
}