VS Code 调试太难？这款可视化代码调试工具值得拥有

这是一个在调试期间可视化数据结构的 VS Code 扩展，使用它之后，你可以清晰明了的看到不同数据之间的关系。

一个名叫 hediet 的外国程序员开源了一个在调试期间可视化数据结构的 VS Code 扩展——Debug Visualizer。

这个扩展程序可以在 VS Code 中调试任何编程语言，当然，目前最适配的编程语言是 JavaScript 和 TypeScript，另外 C#、Java 和 PHP 也进行了相应的测试。

如何安装使用？

安装此扩展后，使用命令 Open a new Debug Visualizer View 打开新的可视化器视图。在这个视图中，你可以输入一个表达式，该表达式在逐步分析你的代码时会进行评估和可视化，例如

    kind: { graph: true },
    nodes: [ { id: "1", label: "1" }, { id: "2", label: "2" } ],
    edges: [{ from: "1", to: "2", label: "edge" }]
}

你可以通过编写自己的函数，从自定义数据结构中提取这些调试数据。

哪些数据可被可视化呢？

很多人可能会问，这个可视化代码调试工具都支持哪些东西可视化呢？基本上你能想到的，它都可以做到可视化。

图形可视化

Graphviz 和 Vis.js 可视化工具可以渲染与 Graph 界面匹配的数据。

interface Graph {
  kind: { graph: true };
  nodes: NodeGraphData[];
  edges: EdgeGraphData[];
}
interface NodeGraphData {
  id: string;
  label?: string;
  color?: string;
  shape?: "ellipse" | "box";
}
interface EdgeGraphData {
  from: string;
  to: string;
  label?: string;
  id?: string;
  color?: string;
  dashes?: boolean;
}

graphviz 可视化工具可以通过使用 SVG 查看器来查看 viz.js 创建的 SVG。

Plotly 可视化

原文链接:【 https://www.infoq.cn/article/JWeuxoY3bm4TMsz8LqxK 】。未经作者许可，禁止转载。