Debug Visualizer：在 VS Code 调试中可视化数据结构完整指南

开发工具数据可视化【免费下载链接】vscode-debug-visualizerAn extension for VS Code that visualizes data during debugging.项目地址https://gitcode.com/gh_mirrors/vs/vscode-debug-visualizer点击查看免费下载导读Debug Visualizer 是一款将 VS Code 调试期 watch 视图升级为可视化面板的扩展——它让被监视的表达式不再以纯文本展示而是渲染为图Graph、网格Grid、表格Table、Plotly 图表、AST 树等丰富形态。本文以扩展官方 READMEextension/README.md为骨架结合仓库源码深入讲解其支持的语言/调试器矩阵、JSON 数据契约、Data Extractor 机制、内置提取器清单、UI 交互与全部配置项帮助读者在几分钟内搭建出可交互的数据结构可视化调试环境。核心概念从文本 watch 到可视化 watchDebug Visualizer 的定位非常明确像 VS Code 的 watch 视图一样工作但把被监视值的展示形式从文本换成富可视化。你仍然一次只监视一个表达式可以同时打开多个可视化窗口并在逐步调试stepping过程中看到表达式结果实时刷新。整个扩展由 extension/src/extension.ts 作为入口激活其数据链路为可视化视图把用户输入的表达式发送给调试会话后端VisualizationBackend根据调试适配器类型选择求值引擎得到表达式求值结果结果经 Data Extractor数据提取器转换为可视化框架可消费的 JSONWebviewwebview/src/components/Visualizer.tsx调用通用可视化框架hediet/visualization渲染出图形界面。底层依赖一个通用的可视化框架hediet/visualization它决定了什么样的 JSON 数据可以被渲染成什么样。想快速了解所有可视化形态可以打开官方提供的Visualization Playground逐个体验README 中提供了链接本文不再转载外部地址。支持的语言与调试器矩阵README 明确给出了经过验证的语言/调试器组合清单这些语言都有对应的可运行 demo 存放在 demos 目录下支持级别语言调试适配器Demo 位置⭐ 完整支持JavaScript / TypeScript 等node、node2、extensionHost、chrome、pwa-chrome、pwa-nodedemos/js✅ 基础支持Dart / Flutterdartdemos/dart✅ 基础支持GogoDelvedemos/golang✅ 基础支持Pythonpythondemos/python✅ 基础支持C#coreclr完整支持进行中demos/csharp✅ 基础支持PHPphpdemos/php✅ 基础支持Javajavademos/java✅ 基础支持Ccppdbgdemos/cpp✅ 基础支持Swiftlldbdemos/swift✅ 基础支持Rustlldbdemos/rust✅ 基础支持Rubyrdbgdemos/ruby上表之外的语言/调试器也可能可以工作All other languages and debuggers might work too。两种支持级别的本质区别在于基础支持Basic Support只能可视化 JSON 字符串你必须为自己的数据结构编写构造 JSON的逻辑完整支持Full Support扩展会注入Data Extractors把一些常见数据结构自动转换为 JSON无需手工构造。以 C# 为例其 demodemos/csharp/ExtractedData.cs展示了如何实现数据提取逻辑而 JS/TS 的完整支持则源于运行时注入的提取器体系见下文。快速上手两条核心命令安装扩展后扩展 manifest extension/package.json 中声明vscode引擎要求^1.84.0入口为./dist/extension.js核心操作只有两条命令Debug Visualizer: New View打开一个新的可视化视图。在视图里输入表达式该表达式会在调试过程中持续求值并可视化。Debug Visualizer: Use Selection as Expression快捷键ShiftF1把当前编辑器选中的文本作为表达式送入最近打开的可视化窗口。第二条命令在源码 extension/src/extension.ts 中有个细节当光标所在处没有选区时扩展会尝试用正则/(.*)/g匹配当前行内反引号包裹的文本作为表达式只有当存在实际选区时才取选区文本。如果没有已打开的可视化窗口该命令会直接创建一个携带该表达式的新视图。数据契约可视化什么 JSON表达式求值结果的格式要求可视化视图最终消费的是某个特定 schema 下的 JSON 对象字符串对应某一种受支持的可视化器。该 JSON 字符串允许被单引号或双引号包裹也可以不加引号但不允许被转义。README 给出的合法示例是{ kind: { text: true }, text: some text\nmore text }如果表达式求值结果不符合预期可以先用 VS Code 自带的 watch 窗口查看表达式实际求出的值——扩展本质上只是解释这一求值结果This extension simply interprets that result。官方同时提供了两份权威参考所有受支持可视化的 JSON Schemavisualization-data-schema.json对应的 TypeScript 声明文件visualization-data.ts。Data Extractor数据与 JSON 之间的桥对于 JS/TS 这类完整支持的语言扩展会在被调试进程debugee中注入运行时代码以启用 Data Extractor。它的作用是解除被可视化的值必须是 JSON 字符串的限制作为自定义数据结构与可视化器所消费 JSON 之间的桥梁。当多个 Data Extractor 都适用时可以在可视化视图中选择一个偏好的提取器。注入由扩展后端负责在 extension/src/VisualizationBackend/JsVisualizationSupport.ts 中实现 JS 求值引擎并通过>export interface DataExtractor { id: string; // 在所有提取器中必须唯一 dataCtor?: string; // 过滤要提取的数据 getExtractions(data, extractionCollector, context): void; } export interface DataExtraction { priority: number; // 优先级越高越被优先采用 id?: string; // 提取的唯一 id用于表达偏好 name?: string; // 用户友好名称 extractData(): VisualizationData; }实现与 API 的完整说明见>export type LoadDataExtractorsFn ( register: (extractor: DataExtractor) void, helpers: typeof helpersTypes ) void;一个给Map提供表格可视化的自定义提取器完整示例来自 README// 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, })), }); }, }); }, }); };要点拆解register(extractor)用于注册一个提取器id必须全局唯一getExtractions(data, collector, context)判断数据是否匹配这里是instanceof Map匹配则调用collector.addExtraction(...)提出一种候选提取priority数值越大越优先当多个提取器适用时视图里可以指定偏好helpers是注入的一组魔法函数其实现集中在>debugVisualizer.debugAdapterConfigurations: { lldb: { expressionTemplate: script to_json(\${expr}\), context: repl } }字段说明expressionTemplate最终发送给调试器求值的表达式模板用${expr}指代当前被可视化的表达式context求值使用的上下文枚举值为watch或repl。源码 Config.ts 显示未配置时context默认回退为watch模板默认回退为${expr}此外模板中还可使用${preferredDataExtractorId}引用当前偏好的提取器 id。模板替换是简单的字符串拆分/拼接实现evaluateTemplate。2.debugVisualizer.useChromeKioskMode是否使用 Chrome 的Kiosk 模式弹出 Debug Visualization 视图。默认值为true如果找不到 Chrome 或未开启此配置则使用系统默认浏览器弹出。实现上依赖依赖项chrome-launcher见 extension/package.json dependencies配置默认值在 Config.ts 中由serializerWithDefaultboolean(true)兜底。3.debugVisualizer.js.customScriptPaths一个绝对路径数组指定注入到被调试 JS 进程中的自定义脚本即上一节的自定义 Data Extractor。约束与行为每个脚本必须把module.exports赋值为LoadDataExtractorsFn类型的函数路径必须绝对可使用${workspaceFolder}变量脚本变更后自动重新加载。4.debugVisualizer.customVisualizerScriptPathsREADME 未展开、但 manifest 中已声明的另一项配置注入到可视化器webview侧的自定义脚本数组用于提供自定义可视化。每个脚本必须把module.exports赋值为import(hediet/visualization-core).RegisterVisualizerFn类型的函数路径同样必须为绝对路径并支持${workspaceFolder}解析逻辑在 Config.ts。精选 Demo 一览README 提供了若干演示动图展示不同可视化形态的实际效果反转双向链表逐步调试链表反转过程观察节点引用变化docs/doubly-linked-list-reverse-demo.gif对应 demo 见 demos/js/demo_doubly-linked-list.ts随机游走Random WalkPlotly 折线图实时展示随机游走轨迹docs/visualization-plotly-random-walk.gif对应 demo 见 demos/js/demo_random-walks.tsAST 可视化直接可视化 TypeScript AST 节点docs/ast-demo.gif对应 demo 见 demos/js/demo_typescript-asts.ts表格可视化以表格形式展示数据docs/table-demo.gif。与其他工具的配合README 特别指出该扩展与hediet/node-reload已出现在 extension/package.json 的 dependencies 中配合得很好二者组合可以为 TS/JS 提供一个交互式 playground调试期间修改代码即可热重载并即时看到可视化更新见 docs/demo-hot.gif。参与贡献项目欢迎通过 GitHub issue 提出反馈与建议。README 明确表示为 JavaScript 之外的语言搭建运行时基础设施即让更多语言获得完整支持的 Data Extractors是社区非常欢迎的 PR 方向。各语言 demo 位于 demos 目录可作为从基础支持走向完整支持的参考起点。赞分享开发工具数据可视化【免费下载链接】vscode-debug-visualizerAn extension for VS Code that visualizes data during debugging.项目地址https://gitcode.com/gh_mirrors/vs/vscode-debug-visualizer点击查看免费下载相关推荐终极指南如何用VS Code Debug Visualizer实现数据可视化调试终极指南如何用VS Code Debug Visualizer实现数据可视化调试 VS Code Debug Visualizer是一款强大的VS Code扩开发工具数据可视化终极指南如何用 VS Code Debug Visualizer 让数据结构可视化超实用调试技巧大公开终极指南如何用 VS Code Debug Visualizer 让数据结构可视化超实用调试技巧大公开 想要在调试时直观地看到复杂的数据结构变化吗VS开发工具数据可视化VS Code Debug Visualizer 终极指南让代码调试从此可视化VS Code Debug Visualizer 终极指南让代码调试从此可视化 还在为调试复杂数据结构而头疼吗 面对层层嵌套的对象、错综复杂的链表关系开发工具数据可视化上一篇黑苹果安全防护终极指南10个必知防护技巧下一篇AutoDock-Vina分子对接终极指南Windows 11环境5个必学技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考