分享每一天-VS Code 强大的开源工具！实时可视化Debug，一键解析代码结构

工具推荐 1656 0 创建时间：2020-11-04 14:43:15

实时可视化Debug

DeBug 太枯燥？让 VS Code 画个图，自动帮你理清数据结构与代码思路，这就是 Reddit 2K 多点赞的开源新工具。

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

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

之前机器之心曾介绍过极简 DeBug 工具 PySnooper ，我们只需要向感兴趣的函数增加一个装饰器，就能得到该函数的详细 log，包含哪行代码能运行、什么时候运行以及本地变量变化的确切时间等等。这个 GitHub 12.3K Star 量的 DeBug 工具，输出风格是这样色的：

![](http://www.seedblog.cn/uploads/article/2020-11-04/pO8hfEIX10MK7W4kSfuu5njGTyBBnrU9ysxOxe26.png)

这种复杂的 DeBug 工具，看起来就比较劝退。此外，在 PyCharm 上使用断点调试，它输出的也是各种变量的定义与值，同样是一堆详细信息。

那么能不能有一种更优雅的 DeBug 方式，以更简洁的信息快速帮我们找到代码的问题所在？这就是 VS Code 最新推出的可视化 DeBug，它能以图的方式快速展示数据结构。

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

![](http://www.seedblog.cn/uploads/article/2020-11-04/EcXMX2TUgLjxy0TP9mGljOG8ngPuseO5g8nFWYk3.gif)

这种可视化非常优雅，而且该工具也会根据数据结构以不同的方式展现，例如树形、表格、曲线和图等。如下动图展示几种不同的可视化方式：

![](http://www.seedblog.cn/uploads/article/2020-11-04/KGpMDFCThZBGQmNQVOOt4XaQXqqQjcc3brnu7pXM.gif)

效果上确实非常惊艳，它与之前的 DeBug 方式采用完全不同的展现形式。目前该 VS Code Debug Visualizer 在 JavaScript/TypeScript 上有比较好的效果，在 C#、Java 和 PHP 上也正在积极测试，其它语言也还都能用。