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

作者 | hediet
编辑 | 田晓旭
这是一个在调试期间可视化数据结构的 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[];

}

// See plotly docs for Plotly.Data.

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

interface Tree {

  kind: { tree: true };

  root: TreeNode;

}

interface TreeNode {

  id: string | undefined;

  name: string;

  value: string | undefined;

  emphasizedValue: string | undefined;

  children: TreeNode[];

  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
今日推荐文章

独家揭秘陆金所去Oracle全过程：18个月将90%数据库业务换到MySQL

活动推荐

2 月 26 日晚 8-9 点，京东云与 AI 事业部人工智能部平台研发负责人朱二涛老师将为大家讲解《
如何基于模型训练平台快速打造 AI 能力

》，基于京东在 AI 方向的探索，介绍 AI 开发全流程、如何基于已有模型做二次训练、如何加速模型开发等内容，了解及报名：

为你推荐
InfoQ Pro 是 InfoQ 专为技术早期开拓者和乐于钻研的技术探险者打造的专业媒体服务平台。

点个在看少个 bug
 
:point_down: