A VS Code extension for visualizing data structures while debugging. Like the VS Code's watch view, but with custom visualizations.
See demos for demos. These languages and debuggers are verified to work with this extension:
All other languages and debuggers might work too. For languages with Rudimentary Support, only JSON strings can be visualized - you must implement some logic that builds this JSON for your data structure! Fully supported languages offer Data Extractors which convert some well known data structures to json.
After installing this extension, use the command
You can refresh the evaluation and open the current visualizer view into a new browser window by using the top right buttons. You can also unfold the details pane to select a Data Extractor and a Visualizer.
Use the command
Visualizers consume specific JSON data. See Integrated Visualizers for the schema of supported JSON data.
The currently watched expression should evaluate to a JSON Object string,
matching the schema of one of the supported visualizers. This JSON string may be surrounded by single or double quotation marks (or none at all) and must not be escaped.
A valid example is
The following visualizers are built into this extension.
The Graphviz and vis.js visualizers render data that matches the
The graphviz visualizer uses the SVG viewer to render the SVG created by
Demo. The plotly visualizer uses plotly and can visualize JSON data matching the following interface:
The tree visualizer renders data that matches the
The AST (Abstract Syntax Tree) visualizer renders data that matches the
Additionally to the tree view, the source code is rendered and when selecting an AST node, its span in the source code is highlighted.
Visualizes data matching the following interface:
The text visualizer renders data that matches the
The SVG visualizer renders data that matches the
Dot Graph Visualization
The Graphviz Dot visualizer renders data that matches the
Data extractors convert arbitrary values into data consumable by visualizers.
They live in the debugee. The following data extractors are injected automatically into the debugee by this extension when using the
As Is Data Extractor
Treats the data as direct input to the visualizer.
Use Method 'getDebugVisualization'
Uses plotly to plot an array of numbers.
Constructs a graph containing all objects reachable from object the expression evaluates to. Graph is constructed using a breadth search. Stops after 50 nodes.
Creates Grid visualization data for an array.
This extension provides these configuration options:
This extension works very well together with my library