Debug Visualizer 需在调试会话中手动调用命令打开，且仅支持特定调试器（如node、python），数据须转为DOT字符串或Plotly兼容格式，否则显示空白或报错。
VSCode 本身不内置数据结构图形化调试能力，但通过 Debug Visualizer 扩展可实现链表、树、排序过程等的实时可视化——前提是正确配置调试器、表达式和数据提取逻辑，否则只会看到空面板或报错 Cannot visualize value。
安装 Debug Visualizer 后为什么看不到可视化面板？
常见错误是没启动调试会话就直接打开面板，或调试器类型不被支持。该扩展只在调试状态下激活，且依赖调试适配器返回可序列化的值。
- 必须先设置断点并按
F5启动调试（node、python、pwa-chrome等已完全支持；cppdbg或gdb仅支持 JSON 字符串，不能直接渲染树/图） - 面板默认不自动弹出，需手动执行命令：
Ctrl+Shift+P→ 输入Debug Visualizer: New View - 如果面板打开后显示空白或
No data，检查当前作用域是否有变量——例如在函数内部断点，但想可视化全局myTree，它可能尚未定义或未进入作用域
怎么让链表/二叉树在可视化面板里画出来？
不能直接写 display(myList)——Debug Visualizer 不认识自定义类，必须手动转成它能解析的格式，最常用的是 Graphviz DOT 字符串。
- 在可视化面板中输入多行 JS 表达式（
Shift+Enter换行，Ctrl+Enter执行）： const dot = 'digraph { A -> B; B -> C; }'; display(dot, 'dot');- 对二叉树，需遍历生成节点和边关系，例如：
function toDot(node) { return node ? `node${node.val} -> node${node.left?.val}; ${toDot(node.left)} ${toDot(node.right)}` : ''; } - 注意：DOT 渲染要求字符串严格符合语法，少一个分号或括号就会失败，建议先在在线 Graphviz 编辑器验证
Python 调试时数组/矩阵怎么变成折线图或热力图？
靠 display() + Plotly 支持，但前提是数据得是纯数值数组（list 或 numpy.ndarray），且不能含嵌套对象或 NaN。
- 简单数组绘图：
display([1, 4, 2, 8, 5], 'plotly'); // 自动生成折线图 - 二维数组热力图：
display([[0,1,2],[3,4,5]], 'plotly'); // 自动识别为 heatmap - 若数据来自
pandas.DataFrame，需先转为 list：display(df.values.tolist(), 'plotly') - 常见失败原因：数组里混了
None或字符串，Plotly 会静默失败，面板无反应——建议先用console.log(JSON.stringify(data))检查结构
真正卡住人的地方不是“怎么画”，而是“怎么把运行时的数据干净地抽出来”。比如 C++ 的 std::vector 在调试变量面板里能看到长度和地址，但 Debug Visualizer 拿不到原始内存数据，必须靠 .natvis 或 cpptools 的 JSON visualizer 先把它格式化成 JSON，再喂给可视化器——这一步跨语言、跨平台，几乎没有通用解法。
