这是一个VSCode扩展，在调试过程中可视化数据结构。使用后，你可以清楚地看到不同数据之间的关系。国外一位名叫hediet的程序员开源了一个调试时可视化数据结构的VSCode扩展——DebugVisualizer。此扩展可以调试VSCode中的任何编程语言。当然，最适合的编程语言是JavaScript和TypeScript。此外，C#、Java和PHP也进行了相应的测试。1、如何安装使用？安装此扩展后，使用命令OpenanewDebugVisualizerView打开一个新的可视化视图。在此视图中，您可以输入一个表达式，该表达式将在单步执行代码时进行评估和可视化，例如kind:{graph:true},nodes:[{id:"1",label:"1"},{id:"2",label:"2"}],edges:[{from:"1",to:"2",label:"edge"}]你可以编写自己的函数，从自定义中提取此调试数据数据结构。2.哪些数据可以可视化？很多人可能会问，这个可视化代码调试工具支持可视化的东西有哪些？基本上任何你能想到的，它都可以被形象化。图形可视化Graphviz和Vis.js可视化工具可以呈现匹配Graph接口的数据。interfaceGraph{kind:{graph:true};nodes:NodeGraphData[];edges:EdgeGraphData[];}interfaceNodeGraphData{id:string;label?:string;color?:string;shape?:"ellipse"|"box";}interfaceEdgeGraphData{from:string;to:string;label?:string;id?:string;color?:string;dashes?:boolean;}graphviz可视化工具可以使用SVG查看器查看viz.js创建的SVG。Plotly可视化Plotly可视化器可以通过plotly渲染匹配界面的JSON数据。exportinterfacePlotly{kind:{plotly:true};data:Partial[];}//参见plotlydocsforPlotly.Data.Tree可视树可视化器渲染匹配Tree接口的数据。interfaceTree{kind:{tree:true};root:TreeNode;}interfaceTreeNode{id:string|undefined;name:string;value:string|undefined;emphasizedValue:string|undefined;children:TreeNode[];data:TExtraData;isMarked:boolean;}AST可视化AST可视化器呈现与Ast接口匹配的数据。interfaceAstextendsTree<{position:number;length:number;}>,Text{kind:{text:true;tree:true;ast:true};}除了树视图，AST可视化器还突出了源的来源代码。GridVisualizationGridVisualizer呈现匹配以下界面的数据。exportinterfaceGrid{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视觉文本可视化工具呈现与文本界面匹配的数据。interfaceText{kind:{text:true};text:string;mimeType?:string;fileName?:string;}fileName的mimeType和文件扩展名用于语法高亮显示。SVGVisualizerSVGVisualizer呈现与Svg界面匹配的数据。实际的SVG数据必须以文本形式存储。interfaceSvgeextendsText{kind:{text:true;svg:true};}点图可视化点图可视化工具呈现与DotGraph接口匹配的数据。interfaceDotGraphextendsText{kind:{text:true;dotGraph:true};}Viz.js(Graphviz)用于渲染。3.可以提取哪些数据？该工具包括一个JavaScript/TypeScript数据提取器，可将任意值转换为可视化数据。本扩展会自动在被调试器中注入以下数据提取器，当然用户也可以注册自定义数据提取器。ToString只需对值调用.toString()即可将数据转换为文本类型。TypeScriptAST直接可视化ts.NodeRecord和[ts.Node]可视化。如果记录包含fn个键，它们的值将为每个节点显示。AsIsDataExtractor将数据直接馈送到可视化工具中。使用方法getDebugVisualization调用.getDebugVisualization()将数据转换为可视化工具的直接输入。Plotlyy-Values使用plotly绘制数值数组。对象图构造一个图，其中包含从表达式求值的对象可到达的所有对象。使用广度搜索构建图，在50个节点后停止。ArrayGrid可以为数组数据创建Grid可视化。4.其他扩展支持多行表达式，比如点击shift+enter可以换行，点击ctrl+enter可以计算表达式。当只有一行时，enter是提交当前表达式，当有多行时，enter插入另一个换行符。经扩展开发人员测试，可与TypeScript/JavaScript库很好地配合使用。GitHub开源地址：https://github.com/hediet/vscode-debug-visualizer/tree/master/extension
