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

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

创新互联公司是一家专注于成都网站建设、网站制作与策划设计,同德网站建设哪家好?创新互联公司做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:同德等地区。同德做网站价格咨询:18980820575

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

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

1. 如何安装使用？

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

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

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

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

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

图形可视化

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

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

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

Plotly 可视化

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

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

Tree 可视化

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

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

AST 可视化

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

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

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

Grid 可视化

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

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

Text 可视化

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

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

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

SVG 可视化

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

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

点图可视化

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

 
 
 
    
  
  
  
  1. interface DotGraph extends Text {
    2. 
  
  
  
  2.   kind: { text: true; dotGraph: true };
    3. 
  
  
  
  3. }
    4.

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

分享题目：VSCode调试太难？这款可视化代码调试工具值得拥有
文章路径：http://www.mswzjz.cn/qtweb/news21/241471.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

小程序开发知识

同城分类信息

重庆移动网站建设　　 　成都柴油发电机组维修　　 　眉山服务器租用　　 　新华建筑装饰　　 　东电技改　　 　消防工程　　 　力比特机械　　 　重庆服务器托管　　 　成都网络推广公司　　 　成都微商城开发　　 　成都网站设计　　 　成都网站设计　　 　做网站公司　　 　营山产后护理服务　　 　重庆托管服务器　　 　建站公司　　 　成都网站设计　　 　成都网络营销　　 　成都定制网页设计　　 　成都名片印刷