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

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

 [[316055]]

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

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

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

1. 如何安装使用?

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

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

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

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

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

图形可视化

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

  1. interface Graph { 
  2.   kind: { graph: true }; 
  3.   nodes: NodeGraphData[]; 
  4.   edges: EdgeGraphData[]; 
  5.  
  6. interface NodeGraphData { 
  7.   id: string; 
  8.   label?: string; 
  9.   color?: string; 
  10.   shape?: "ellipse" | "box"
  11.  
  12. interface EdgeGraphData { 
  13.   from: string; 
  14.   to: string; 
  15.   label?: string; 
  16.   id?: string; 
  17.   color?: string; 
  18.   dashes?: boolean

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

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

Plotly 可视化

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

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

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

Tree 可视化

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

  1. interface Tree<TData = unknown> { 
  2.   kind: { tree: true }; 
  3.   root: TreeNode<TData>; 
  4. interface TreeNode<TExtraData> { 
  5.   id: string | undefined; 
  6.   name: string; 
  7.   value: string | undefined; 
  8.   emphasizedValue: string | undefined; 
  9.   children: TreeNode<TExtraData>[]; 
  10.   data: TExtraData; 
  11.   isMarked: boolean

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

AST 可视化

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

  1. interface Ast 
  2.   extends Tree<{ 
  3.       position: number; 
  4.       length: number; 
  5.     }>, 
  6.     Text { 
  7.   kind: { text: true; tree: true; ast: true }; 

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

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

Grid 可视化

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

  1. export interface Grid { 
  2.   kind: { array: true }; 
  3.   columnLabels?: { label?: string }[]; 
  4.   rows: { 
  5.     label?: string; 
  6.     columns: { 
  7.       content?: string; 
  8.       tag?: string; 
  9.       color?: string; 
  10.     }[]; 
  11.   }[]; 
  12.   markers?: { 
  13.     id: string; 
  14.  
  15.     row: number; 
  16.     column: number; 
  17.     rows?: number; 
  18.     columns?: number; 
  19.  
  20.     label?: string; 
  21.     color?: string; 
  22.   }[]; 

Text 可视化

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

  1. interface Text { 
  2.   kind: { text: true }; 
  3.   text: string; 
  4.   mimeType?: string; 
  5.   fileName?: string; 

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

SVG 可视化

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

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

点图可视化

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

  1. interface DotGraph extends Text { 
  2.   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

 

责任编辑:张燕妮 来源: 架构头条
相关推荐

2022-08-08 07:35:37

云测试工具云存储云计算

2020-02-27 08:59:11

DebugCode开源工具

2022-05-05 07:01:09

可视化代码执行工具

2022-08-28 10:36:53

调试工具通用

2022-03-11 08:32:53

C代码代码编辑vscode

2022-07-25 07:57:19

工具代码调试

2024-07-09 08:31:26

2024-01-24 13:22:40

Python调试工具技巧

2023-03-29 08:18:16

Go调试工具

2022-06-06 12:18:44

配置可视化Nginx

2011-08-15 17:38:48

iPhone开发调试工具

2021-01-18 17:23:30

代码调试VS Code

2017-11-27 11:59:40

Node.JSChrome调试程序

2012-02-24 09:25:20

JavaScript

2016-12-02 20:23:51

AndroidADB

2009-12-04 13:31:50

VS代码调试

2009-10-22 13:02:47

SQL SERVER

2019-07-15 16:00:06

微软开源TensorWatch

2010-06-02 15:21:29

Linux 网络性能

2010-06-02 15:37:38

Linux 网络性能
点赞
收藏

51CTO技术栈公众号