用于VS Code调试的可视化数据插件：Debug Visualizer

安装此扩展后，使用命令 Open a new Debug Visualizer View 打开新的可视化器视图。在这个视图中，你可以输入一个表达式，该表达式在逐步分析你的代码时会进行评估和可视化，例如1{ 2 kind: { graph: true }, 3 nodes: [ { id: “1”, label: “1” }, { id: “2”, label: “2” } ], 4 edges: [{ from: “1”, to: “2”, label: “edge” }]5}复制代码你可以通过编写自己的函数，从自定义数据结构中提取这些调试数据。请参阅 https://github.com/hediet/vscode-debug-visualizer/raw/master/data-extraction/README.md 以获取 createGraphFromPointers 的文档。集成式展示台可视化工具用于显示由数据提取器提取的数据。可视化工具是（大部分）React 组件，位于扩展程序的 Web 视图中。图形可视化Graphviz 和 vis.js 可视化器渲染与 Graph 接口匹配的数据。 1interface Graph { 2 kind: { graph: true }; 3 nodes: NodeGraphData[]; 4 edges: EdgeGraphData[]; 5} 6 7interface NodeGraphData { 8 id: string; 9 label: string;10 color?: string;11}1213interface EdgeGraphData {14 from: string;15 to: string;16 label: string;17 id?: string;18 color?: string;19 weight?: number;20}复制代码graphviz 可视化工具使用 SVG 查看器来渲染由 viz.js 创建的 SVG。可视化1export interface Plotly {2 kind: { plotly: true };3 data: Partial<Pl