A VS Code extension for visualizing data structures during debugging.

usage

After installing this extension, use the Open a new Debug Visualizer View command to Open a new Visualizer View. In this view, you can enter an expression that will be evaluated and visualized as you step through your code, for example

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

You can extract this debug data from custom data structures by writing your own functions. Please refer to https://github.com/hediet/vscode-debug-visualizer/raw/master/data-extraction/README.md for createGraphFromPointers The document.

Integrated display stand

Visualization tools are used to display the data extracted by the data extractor. The visualizer is the (mostly) React component, located in the Web view of the extender.

Graphic visualization

Graphviz and Vis.js visualizers render data that matches the Graph interface.

 1interface Graph { 2    kind: { graph: true}; 3 nodes: NodeGraphData[]; 4 edges: EdgeGraphData[]; 5} 6 7interface NodeGraphData { 8 id: string; 9 label: string; 10 color? : string; 11}1213interface EdgeGraphData {14 from: string; 15 to: string; 16 label: string; 17 id? : string; 18 color? : string; 19 weight? : number; 20}Copy the code

The Graphviz visualization tool uses the SVG viewer to render SVG created by viz.js.



visualization

1export interface Plotly {2    kind: { plotly: true}; 3 data: Partial<Plotly.Data>[]; 4}5// See plotly docsfor Plotly.Data.Copy the code



Tree visualization

The Tree visualizer renders data that matches the Tree interface.

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


AST visualization

The AST visualizer renders data that matches the AST interface.

1interface Ast2 extends Tree<{3 position: number; 4 length: number; 5 }>,6 Text {7 kind: { text:true; tree: true; ast: true}; 8}Copy the code

Displays a text representation in addition to a tree view.

Text visualization

The Text visualizer renders data that matches the Text interface.

1interface Text {2    kind: { text: true}; 3 text: string; 4 mimeType? : string; 5 fileName? : string; 6}Copy the code

File extensions for mimeType and fileName are used for syntax highlighting.

The SVG visualization

The SVG visualizer renders the data that matches the SVG interface. The actual SVG data must be stored in text.

1interface Svg extends Text {2    kind: { text: true; svg: true}; 3}Copy the code

Dot map visualization

The DotGraph visualizer renders data that matches the DotGraph interface.

1interface DotGraph extends Text {2    kind: { text: true; dotGraph: true}; 3}Copy the code

Viz.js (Graphviz) is used for rendering.

Integrated data extractor

The data extractor converts arbitrary values into visual data. They exist in the debugger. This extension automatically injects the following data extractors. You can also register custom data extractors.

ToString

Simply call.tostring () on the value and treat the result as text.

TypeScript AST

  • Visualize ts.Node directly

  • Visualization of Record and [ts.Node]. If the record contains fn keys, their values are displayed for each node.

As Is data extractor

Enter the data directly into the visualization tool.

Use method ‘getDebugVisualization’

Call.getDebugvisualization () on the value and treat the results as direct input to the visualization tool.

Plotly y-Values

Draw an array of numbers using Plotly.

Object graph

Construct a graph that contains all objects reachable from the object evaluated to by the expression. Construct the graph using breadth search. Stop after 50 nodes.

The UI features

  • Multi-line expression: Press Shift + Enter to add a new line, CTRL + Enter to evaluate the expression. When there is only one line, Enter submits the current expression, but when there are multiple lines, Enter inserts another newline character.

limitations

Currently, only JavaScript (and TypeScript) values can be visualized, and only a small amount of visualization is supported. The architecture is powerful enough to support other languages in the future.

@hediet/debug-visualizer-data-extraction

A library that implements and registers custom data extractors by providing an infrastructure. For more information, see the library’s README (https://github.com/hediet/vscode-debug-visualizer/raw/master/data-extraction/README.md).

You can also look at

This extension can library with me @ hediet/node – reload (https://github.com/hediet/node-reload) work well together. Together, they provide an interactive typescript demonstrator.


After a few days of rest and recuperation, I finally returned.

Welcome everyone to pay attention to the public number: front-end pioneer, front-end dry goods, tutorial everything!