debug visualizer 需在调试会话中手动调用且依赖严格格式：dot字符串需语法正确，plotly数据须为纯数值数组或二维列表，自定义结构须手动转为可序列化格式。
Debug Visualizer 不是“装完就能画树”的开箱即用工具，它只在调试会话中工作，且对数据格式极其挑剔——直接写 myTree 或 list 大概率显示空白或报错 Cannot visualize value。
为什么 Debug Visualizer 面板打开后是空的？
最常见原因是：没进调试状态就点开了面板，或当前断点作用域里根本不存在你要可视化的变量。
- 必须先按
F5启动调试（支持的调试器包括node、pwa-chrome、python；cppdbg仅能传 JSON 字符串，不能直接渲染树） - 面板默认不自动弹出，要手动执行命令：
Ctrl+Shift+P→ 输入Debug Visualizer: New View - 如果断点在函数内部，而你想看全局变量
myList，它可能尚未初始化或不在当前作用域——换到更外层断点，或改用闭包内定义的变量 - 检查调试控制台是否报错
Failed to evaluate expression，这通常意味着表达式语法错误或访问了未定义属性
怎么让链表/二叉树真正画出来？
Debug Visualizer 不认识自定义类，必须手动转成它能解析的格式。最可靠的是 Graphviz DOT 字符串，语法严格，少一个分号就失败。
- 在可视化面板中按
Shift+Enter换行，写多行 JS 表达式： 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)}` : ''; } display(toDot(root), 'dot');- 务必先在在线 Graphviz 编辑器（如
https://dreampuf.github.io/GraphvizOnline）验证 DOT 字符串是否合法——否则面板只会沉默
Python 调试时数组/矩阵怎么画折线图或热力图？
靠 display(data, 'plotly')，但前提是数据干净：纯数值、无 None、无字符串、不嵌套对象。
- 一维数组自动转折线图：
display([1, 4, 2, 8, 5], 'plotly') - 二维列表自动识别为热力图：
display([[0,1,2],[3,4,5]], 'plotly') - 如果是
pandas.DataFrame，必须先转：display(df.values.tolist(), 'plotly') - 常见静默失败原因：数组含
NaN或None——建议先在调试控制台运行console.log(JSON.stringify(myData))确认结构 - NumPy 数组基本可用，但若 dtype 是
object（比如混了字符串），Plotly 会拒绝渲染
真正卡住人的从来不是“怎么调用 display”，而是如何从运行时对象里干净地抽取出可序列化的原始数据——尤其是 C++ 的 std::vector 或 Python 的自定义容器，它们在调试变量面板里只显示地址或长度，需要手动遍历提取值再构造数组。
