告别调试困境：vscode-debug-visualizer让数据结构一目了然

【免费下载链接】vscode-debug-visualizer An extension for VS Code that visualizes data during debugging. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-debug-visualizer

在软件开发过程中，调试是不可或缺的环节。传统调试工具往往只能以文本形式展示变量和数据结构，这对于复杂的数据结构（如链表、树、图等）来说，理解其状态和关系变得异常困难。vscode-debug-visualizer扩展应运而生，它能够在调试过程中可视化各种数据结构，帮助开发者更直观、高效地理解程序运行状态。本文将详细介绍如何选择和使用这款强大的调试可视化工具。

核心功能与优势

vscode-debug-visualizer是一款专为VS Code设计的调试扩展，它的核心功能是在调试过程中提供数据结构的可视化展示。与VS Code自带的监视视图不同，它能够以丰富多样的图形化方式呈现被监视的值。

该扩展支持多种主流编程语言，包括JavaScript/TypeScript、Dart/Flutter、Go、Python、C#、PHP、Java、C++、Swift、Rust和Ruby等。对于JavaScript/TypeScript等语言，提供了完整支持，包括数据提取器（Data Extractors）；对于其他语言，则提供了基本支持，可以通过JSON字符串来可视化数据。

项目的核心实现位于extension/src/目录下，其中extension/src/VisualizationBackend/模块负责处理不同语言的可视化支持，extension/src/VisualizationWatchModel/模块则管理可视化监视模型。

安装与基础使用

安装扩展

在VS Code中，你可以通过扩展市场搜索"Debug Visualizer"并安装。安装完成后，无需额外配置即可开始使用基础功能。

基本使用方法

安装完成后，使用命令Debug Visualizer: New View打开一个新的可视化视图。在该视图中，你可以输入一个表达式，扩展会在调试过程中对该表达式进行求值并可视化结果。

你还可以使用命令Debug Visualizer: Use Selection as Expression（快捷键Shift + F1）将当前选中的文本作为表达式，在最近打开的调试可视化器中使用。

官方详细使用说明可参考extension/README.md。

支持的数据结构与可视化方式

vscode-debug-visualizer支持多种数据结构的可视化，具体取决于所使用的语言和数据提取器。

主要可视化类型

1. 文本（Text）：简单的文本展示，适用于字符串等类型。
2. 表格（Table）：以表格形式展示结构化数据。
3. 图形（Graph）：展示节点和边组成的图结构，如链表、树等。
4. Plotly图表：用于绘制各种统计图表，如折线图、散点图等。
5. AST可视化：可视化抽象语法树，有助于理解代码结构。

数据提取器

对于JavaScript/TypeScript，扩展会自动注入运行时代码以支持数据提取器。数据提取器能够将任意值转换为可视化器可消费的数据。内置的数据提取器包括：

• ToString：调用值的.toString()方法，将结果作为文本展示。
• TypeScript AST：直接可视化ts.Node对象、Record<string, ts.Node>和ts.Node[]。
• As Is Data Extractor：将数据直接作为可视化器的输入。
• Use Method 'getVisualizationData'：调用值的.getVisualizationData()方法，将结果作为可视化器的输入。
• Plotly y-Values：使用Plotly绘制数组中的数字。
• Object Graph：构造一个包含从表达式求值结果可达的所有对象的图，使用广度优先搜索构建，最多显示50个节点。
• Array Grid：为数组创建网格可视化数据。

数据提取器的实现代码位于data-extraction/src/js/api/default-extractors/目录下，你可以通过TypeScriptDataExtractors.ts查看TypeScript相关的数据提取器实现。

高级配置与自定义

调试适配器配置

你可以通过debugVisualizer.debugAdapterConfigurations配置为特定的调试适配器类型设置表达式模板。例如，对于lldb调试适配器，可以这样配置：

"debugVisualizer.debugAdapterConfigurations": {
    "lldb": {
        "expressionTemplate": "script to_json(\"${expr}\")",
        "context": "repl"
    }
}

自定义数据提取器

对于JavaScript/TypeScript，你可以通过debugVisualizer.js.customScriptPaths配置指定自定义脚本，这些脚本会被注入到被调试程序中，用于注册自定义数据提取器。

一个自定义数据提取器的示例：

// @ts-check
/**
 * @type {import("@hediet/debug-visualizer-data-extraction").LoadDataExtractorsFn}
 */
module.exports = (register, helpers) => {
	register({
		id: "map",
		getExtractions(data, collector, context) {
			if (!(data instanceof Map)) {
				return;
			}

			collector.addExtraction({
				priority: 1000,
				id: "map",
				name: "Map",
				extractData() {
					return helpers.asData({
						kind: { table: true },
						rows: [...data].map(([k, v]) => ({
							key: k,
							value: v,
						})),
					});
				},
			});
		},
	});
};

有关如何创建自定义数据提取器的更多信息，可以参考data-extraction/README.md。

多语言支持与示例

vscode-debug-visualizer为多种编程语言提供了调试可视化支持。项目的demos/目录下提供了各种语言的示例代码。

JavaScript/TypeScript示例

JavaScript/TypeScript是支持最完善的语言。demos/js/src/目录下包含了多个示例，如：

• demos/js/src/demo_doubly-linked-list.ts：演示双向链表的可视化。
• demos/js/src/demo_random-walks.ts：演示随机漫步数据的可视化。

Python示例

对于Python，你需要将数据转换为符合可视化 schema 的JSON字符串。demos/python/demo.py提供了Python示例。

C#示例

C#示例位于demos/csharp/目录下，展示了如何在C#调试中使用可视化功能。

最佳实践与常见问题

最佳实践

1. 合理选择表达式：选择能够准确反映你想要观察的数据结构的表达式。
2. 利用多视图：可以打开多个可视化视图，同时观察不同的数据结构。
3. 自定义数据提取器：对于项目中特有的数据结构，编写自定义数据提取器可以获得更好的可视化效果。
4. 结合断点使用：在关键代码位置设置断点，然后使用可视化工具观察数据状态。

常见问题

1. 可视化不更新：确保调试会话处于活动状态，并且表达式能够被正确求值。
2. 不支持某种数据结构：可以尝试实现自定义数据提取器，或者将数据转换为支持的JSON格式。
3. 性能问题：对于大型数据结构，可视化可能会有性能问题。可以尝试限制可视化的数据量，或者优化数据提取逻辑。

总结

vscode-debug-visualizer是一款功能强大的调试辅助工具，它通过可视化方式极大地提升了理解复杂数据结构的效率。无论是JavaScript/TypeScript等支持完善的语言，还是其他提供基本支持的语言，都能从中获益。通过本文的介绍，你应该能够快速上手并充分利用这款工具来提升你的调试体验。

如果你在使用过程中遇到问题或有功能建议，可以参考CONTRIBUTING.md参与项目贡献或提交issue。

【免费下载链接】vscode-debug-visualizer An extension for VS Code that visualizes data during debugging. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-debug-visualizer