用 debug visualizer 实时可视化算法数据结构变化需设断点于循环/递归关键位置（如交换、插入、访问后），js/ts 开箱即用，python 需手动构造 json；切换提取器可修正渲染类型，避免空白或报错。
直接结论：用 Debug Visualizer 扩展 + 断点 + 表达式输入，就能实时看到算法执行中数据结构的图形变化；Python 需手动构造 JSON，JavaScript/TypeScript 开箱即用。
为什么断点必须设在循环或递归关键位置
可视化不是“跑完再看”，而是“每步都画”。如果断点设在函数入口，只捕获初始状态；设在循环体内部（比如排序算法的每次交换后），才能让 Debug Visualizer 每次暂停时提取并重绘当前数组、链表或树节点。否则你看到的只是静止快照，不是过程。
- 常见错误现象：
Debug Visualizer显示空白或报错Cannot extract data for undefined—— 很可能变量还没初始化，或断点位置太靠前 - 推荐位置：数组排序中
swap(arr[i], arr[j])后；链表插入后newNode.next = current.next完成那行；树遍历中刚访问完一个节点的console.log(node.val)前 - 性能影响：频繁重绘本身不卡顿，但若表达式含大量计算（如
JSON.stringify(hugeArray)），会拖慢单步执行速度
JavaScript/TypeScript 中直接输入变量名就可视化的原理
Debug Visualizer 内置了默认数据提取器（位于 data-extraction/src/js/api/default-extractors/），能自动识别 Array、Map、带 next/left/right 属性的对象等模式。你输 arr 或 root，它就调用对应提取器生成标准 JSON，再交给 Plotly 或 D3 渲染。
- 参数差异：输入
arr是表格视图；输入{ kind: "tree", root }强制走树形提取器；输入arr.map(x => ({ x, label: x > 5 ? "high" : "low" }))可自定义节点标注 - 容易踩的坑：对象里有循环引用（如
node.parent = parent）会导致提取器卡死或崩溃；需提前用structuredClone或手动剥离 - 兼容性：Node.js 调试需确保
launch.json的type是node；浏览器调试依赖Debugger for Edge或Debugger for Chrome扩展
Python 不支持自动可视化？那就手动喂 JSON
截至 2026 年 6 月，Debug Visualizer 官方仍未内置 Python 数据提取器。但你可以绕过限制：在断点处用 print(json.dumps(...)) 输出结构化数据，或更稳妥地——在调试控制台中运行 Python 表达式，把结果转成它认的 JSON 格式。
- 实操建议：在断点暂停后，打开调试控制台（
Ctrl+Shift+Y），输入类似import json; json.dumps({"kind": "array", "data": my_list})，复制输出，粘贴进Debug Visualizer输入框 - 使用场景：LeetCode 刷题时调试二叉树重建、DFS 路径回溯；处理 NumPy 数组时想看形状和值分布
- 容易踩的坑：Python 的
None会被转成null，但Debug Visualizer某些提取器不接受null字段；建议用{} or []替代None，或加"kind": "text"切换为纯文本渲染 - 替代方案：用
python -m trace --trace your_script.py查执行路径，配合matplotlib在代码中插plt.show()看中间态，但无法与断点联动
刷新视图和切换提取器的关键操作
右上角的刷新按钮（↻）不只是重绘，它会重新执行当前输入的表达式，并尝试匹配最适合的可视化器。如果你看到数组被画成散点图而不是网格，大概率是提取器误判了类型。
- 实操建议：点击视图右上角“⋯” → “Select Extractor”，手动选
array、tree或plotly；尤其当变量名是data这种泛称时，自动推断常出错 - 参数差异：“Plotly” 提取器要求输入是
{ x: [...], y: [...] }结构；“Tree” 要求{ root: { val: 1, left: ..., right: ... } }；输错格式会显示空面板或解析错误 - 容易忽略的点：切换提取器后，表达式内容不会变，但渲染逻辑已切换——这意味着你可能需要微调输入（比如加个
.slice(0, 10)控制数据量），否则新提取器可能因数据超限而失败
真正卡住人的地方往往不是装不上扩展，而是表达式没写对、断点停错位置、或以为 Python 能像 JS 那样自动识别结构——其实它不能，得自己搭桥。多试两次 JSON.stringify 和手动选 extractor，比查文档更快定位问题。
