VS Code Debug Visualizer

VS Code Debug Visualizer: Visualize Code Flow

A visualization tool for VS Code that helps developers understand and debug code with interactive graphs and visualizations of program flow, data structures, and more.

What is VS Code Debug Visualizer?

VS Code Debug Visualizer is an open source extension for Visual Studio Code that helps developers visualize and debug their code. It provides interactive data structure and execution flow visualizations that update in real-time as you step through code in the debugger.

Some key features include:

• Data structure visualization - See visual representations of objects, arrays, lists, trees, and graphs. Nodes expand to show contents and connections.
• Execution flow visualization - Follow program execution visually on automatically generated control flow diagrams.
• Watch variable values - Charts show variable values changing over time in debugging sessions.
• Interactive capabilities - Graphs update live in the editor, nodes can be expanded/collapsed, and more.
• Lightweight integration - No context switching, graphs are shown inline in VS Code during debugging.
• Open source - Actively developed on GitHub where contributions and feature requests are welcomed.

By making debugging visual and interactive, Debug Visualizer aims to enhance understanding of code and make finding bugs faster and easier for VS Code developers. It's a free extension that works well for JavaScript, TypeScript, Python, C#, and more languages.

VS Code Debug Visualizer Features

Official Links