内容摘要：这是一个在调试期间可视化数据结构的 VS Code 扩展，使用它之后，你可以清晰明了的看到不同数据之间的关系。一个名叫 hediet 的外国程序员开源了一个在调试期间可视化数据结构的 VS Code

 

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

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

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

1. 如何安装使用？太难

安装此扩展后，使用命令 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" }] 

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

2. 哪些数据可被可视化呢？

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

图形可视化

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 可视化

plotly visualizer 可以通过 plotly 来渲染与界面匹配的 JSON 数据。

export interface Plotly {    kind: {  plotly: true };   data: Partial<Plotly.Data>[]; } // See plotly docs for Plotly.Data. 

Tree 可视化

树可视化器渲染与 Tree 接口匹配的数据。

interface Tree<TData = unknown> {    kind: {  tree: true };   root: TreeNode<TData>; } interface TreeNode<TExtraData> {    id: string | undefined;   name: string;   value: string | undefined;   emphasizedValue: string | undefined;   children: TreeNode<TExtraData>[];   data: TExtraData;   isMarked: boolean; } 

AST 可视化

AST 可视化工具渲染与 Ast 接口匹配的数据。

interface Ast   extends Tree<{        position: number;       length: number;     }>,     Text {    kind: {  text: true; tree: true; ast: true }; } 

除了树视图外，AST 可视化工具还会高亮显示源代码的来源。

Grid 可视化

Grid 可视化工具会渲染与以下接口匹配的数据。

export interface Grid {    kind: {  array: true };   columnLabels?: {  label?: string }[];   rows: {      label?: string;     columns: {        content?: string;       tag?: string;       color?: string;     }[];   }[];   markers?: {      id: string;     row: number;     column: number;     rows?: number;     columns?: number;     label?: string;     color?: string;   }[]; } 

Text 可视化

文本可视化工具渲染与 Text 接口匹配的数据。

interface Text {    kind: {  text: true };   text: string;   mimeType?: string;   fileName?: string; } 

mimeType 和 fileName 的文件扩展名用于语法高亮显示。

SVG 可视化

SVG 可视化工具渲染与 Svg 接口匹配的数据。实际的 SVG 数据必须存储在 text 中。

interface Svg extends Text {    kind: {  text: true; svg: true }; } 

点图可视化

点图可视化工具渲染与 DotGraph 接口匹配的数据。

interface DotGraph extends Text {    kind: {  text: true; dotGraph: true }; } 

Viz.js（Graphviz）用于渲染。

3. 哪些数据可被提取？

该工具中包含有 JavaScript/TypeScript 数据提取器，数据提取器可将任意值转换为可视化数据。这个扩展会自动在被调试者中注入以下数据提取器，当然用户也可以注册自定义数据提取器。

ToString

只需对值调用 .toString() ，香港云服务器就可将数据转换为文本类型。

TypeScript AST

直接可视化 ts.Node Record 和 [ts.Node] 的可视化。如果记录包含 fn 键，则将为每个节点显示它们的值。

As Is 数据提取器

将数据直接输入到可视化工具。

使用方法 getDebugVisualization

调用 .getDebugVisualization()，就可将数据转换为可视化工具的直接输入。

Plotly y-Values

使用 plotly 绘制数字数组。

对象图

构造一个图形，其中包含从表达式求值到的对象可到达的所有对象。使用广度搜索构造图，在 50 个节点后停止。

Array Grid

可以为数组数据创建 Grid visualization。

4. 其它事项

该扩展支持多行表达式，例如点击 shift+enter    可添加新行，点击 ctrl+enter 可计算表达式。当只有一行时，    enter 是提交当前表达式，当有多行时，enter 插入另一个换行符。

经过该扩展程序开发者的测试，可与 TypeScript / JavaScript 库一起很好地工作。

GitHub 开源地址：

https://github.com/hediet/vscode-debug-visualizer/tree/master/extension