代码调试神器：VS Code 开源新工具！

转自机器之心

项目地址：https://github.com/hediet/vscode-debug-visualizer

写代码，难免会遇到各种神奇的问题，代码短我们在脑海中「运行」一遍也就差不多能找出原因。但代码要是比较长，错误就会隐藏比较深了，这个时候，不论你是采用 print() 大法，还是善用 assert 语句，或者干脆设置断点，DeBug 总是一条慢慢排除的道路。

那么，能不能有一种更优雅的 DeBug 方式，以更简洁的信息快速帮我们找到代码的问题所在？

有的，VS Code 最新推出的可视化 DeBug，便能以图的方式快速展示数据结构。

我们先看看效果，如下动图将断点设置为第 32 行定义双向链表，随后一行行运行代码就会在右图展现出对应的数据结构图。

"{ "kind": { "text": true }, "text": "some text\nmore text" }".

对于 TypeScript/JavaScript 等语言，因为已经集成了数据抽取器，因此可以直接自动可视化。而其它没有数据抽取器的语言，就需要自定义数据结构与可视化器之间的关系了

Plotly 可视化

AST 可视化

项目维护者正在讨论添加对 Python 的支持。

参考链接：https://www.reddit.com/r/programming/comments/f88zom/i_made_an_extension_for_visual_debugging_in_vs/

推荐阅读 ↓↓↓