A VS Code extension for visualizing data structures while debugging. Like the VS Code's watch view, but with rich visualizations of the watched value.
Click here to explore all available 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 Basic 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
Use the command
Not all values can be processed. Visualizers consume specific JSON data. This extension uses hediet/visualization, a generic visualization framework. You can see in its playground which data can be visualized and how the visualization looks like.
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
There is a JSON Schema for all supported visualizations and a typescript declaration file.
Reversing a Doubly Linked List
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
This extension provides these configuration options:
Allows to set expression templates for specific debug adapter types. Example:
Configurations here overwrite the built-in support for the corresponding debug adapter type.
Specifies whether to pop out Debug Visualization Views with Chrome in Kiosk Mode. Uses the default browser otherwise or if Chrome is not found. Defaults to
Each script must assign
This extension works very well together with my library