VS Code Debug Visualizer — See Your Data While Debugging

Introduction

VS Code Debug Visualizer adds a live visualization panel to your debugging workflow. Instead of inspecting raw variable values in the watch panel, you get interactive charts, tables, trees, and graph renderings that update in real time as you step through code.

What VS Code Debug Visualizer Does

• Renders arrays, objects, and custom data as interactive charts and tables
• Visualizes graph and tree data structures with automatic layout
• Updates visualizations live as you step through breakpoints
• Supports custom visualization scripts for domain-specific rendering
• Works with any language that has VS Code debug adapter support

Architecture Overview

The extension hooks into the VS Code Debug Adapter Protocol to evaluate expressions in the current debug context. Results are passed to a webview panel that selects an appropriate visualizer based on the data shape. Built-in visualizers handle arrays, trees, graphs, and tables; custom visualizers can be registered via a JavaScript API.

Self-Hosting & Configuration

• Install from the VS Code marketplace with one click
• No external dependencies or services required
• Configure preferred visualizer mappings in VS Code settings
• Add custom visualizer scripts in your project's .vscode/ directory
• Works with JavaScript, TypeScript, Python, C++, Java, and any DAP-compatible debugger

Key Features

• Automatic data type detection selects the best visualization without manual configuration
• Graph visualizer renders nodes and edges with force-directed layout
• Table view handles arrays of objects with sorting and filtering
• Plotly-based chart support for numerical data visualization
• Expression history lets you quickly switch between visualized values

Comparison with Similar Tools

• VS Code Watch panel — shows raw text values; Debug Visualizer renders interactive graphics
• Chrome DevTools — browser-only; Debug Visualizer works with any language
• PyCharm Scientific Mode — Python-specific; Debug Visualizer is language-agnostic
• GDB TUI — terminal-based; Debug Visualizer provides rich graphical output

FAQ

Q: Which programming languages are supported? A: Any language with a VS Code debug adapter, including JavaScript, Python, C/C++, Java, Go, and Rust.

Q: Can I visualize custom data structures? A: Yes. Implement a toDebugVisualizerData() method or write a custom visualizer script.

Q: Does it slow down debugging? A: Expression evaluation happens on demand. The extension only queries the debugger when you open or refresh a visualization.

Q: Can I export visualizations? A: You can screenshot the webview panel. Native export support depends on the visualizer type.

Sources

• https://github.com/hediet/vscode-debug-visualizer
• https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer