VSCode的Debug Visualizer扩展可在调试中直观渲染复杂数据结构。需安装扩展、断点暂停后右键变量选择可视化命令，支持JSON树、自定义脚本及Mermaid/Plotly等渲染后端。
如果您在使用 VSCode 进行调试时希望直观观察复杂数据结构（如嵌套对象、数组、树或图）的内部形态，则 VSCode 的 Debug Visualizer 扩展可直接在调试会话中渲染可视化视图。以下是实现该功能的具体方法：
本文运行环境：MacBook Pro，macOS Sequoia。
一、安装 Debug Visualizer 扩展
Debug Visualizer 依赖 VSCode 官方扩展市场提供的独立插件，需手动启用并配置支持语言的调试器。该扩展本身不内置可视化引擎，而是通过注入式预览桥接调试变量与 Web 渲染层。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按 Cmd+Shift+X）。
2、在搜索框中输入 Debug Visualizer，找到作者为 hediet 的官方扩展。
3、点击“安装”，安装完成后重启 VSCode 或重新加载窗口（Cmd+Shift+P → “Developer: Reload Window”）。
二、启用调试会话中的可视化面板
扩展安装后不会自动激活可视化功能，必须在断点暂停状态下显式调用命令，触发当前变量的图形化渲染。该操作仅对支持的数据类型（JSON-serializable 对象、数组、Map、Set）生效。
1、在代码中设置断点，启动调试会话（F5 或点击运行侧边栏的“开始调试”）。
2、程序暂停后，在“变量”面板中右键单击目标变量（例如 treeNode 或 graphData）。
3、从上下文菜单中选择 Debug Visualizer: Visualize。
4、右侧将弹出独立的可视化面板，显示该变量的层级结构图或自定义图表（取决于变量内容和已注册的可视化器）。
三、配置自定义可视化器脚本
Debug Visualizer 支持用户编写 JavaScript 脚本定义专属渲染逻辑，适用于非标准结构（如链表节点、B+ 树、邻接矩阵）。脚本需放置于工作区根目录下的 .vscode/debugVisualizer/ 文件夹中，并以 .js 后缀命名。
1、在项目根目录创建文件夹：.vscode/debugVisualizer/。
2、新建文件 linked-list.js，写入导出函数：module.exports = (data) => { return { type: 'graph', nodes: [...], edges: [...] }; };
3、重启调试会话，在变量右键菜单中将出现 Visualize as linked-list 选项。
四、使用内置 JSON Tree 可视化器
无需额外配置即可使用的默认可视化器，适用于任意可序列化为 JSON 的值。它将变量转为交互式树形控件，支持展开/折叠、高亮搜索与路径定位，特别适合调试深层嵌套响应体。
1、在调试暂停状态下，于“变量”面板中选中目标变量。
2、按下快捷键 Cmd+Shift+P（macOS）或 Ctrl+Shift+P（Windows/Linux）。
3、输入并选择命令：Debug Visualizer: Visualize as JSON Tree。
4、新面板中将呈现带语法高亮与可拖拽节点的 JSON 结构图，鼠标悬停显示完整原始值。
五、切换不同渲染后端
Debug Visualizer 支持三种底层渲染模式：Webview（默认）、Mermaid（流程图/状态图）、Plotly（数值分布图）。切换方式基于变量内容自动推断，也可通过注释强制指定。
1、在变量声明上方添加 JSDoc 注释：/** @debugVisualizer mermaid */
2、确保变量值为符合 Mermaid 语法的字符串（例如 "graph TD; A-->B; B-->C"）。
3、右键变量并选择 Debug Visualizer: Visualize，面板将渲染为矢量流程图而非树状结构。
