实时可视化Debug：VSCode是一款全新的开源工具，一键分析代码结构我们只要在脑海中“运行”一下，几乎就能找出原因。但是代码越长，错误就会隐藏得越深。这时候不管你用print()方法，用好assert语句，还是干脆设置断点，Debug总是一种慢慢消除的方法。机器之心之前介绍过极简Debug工具PySnooper。我们只需要给我们感兴趣的函数加上一个装饰器，就可以得到该函数的详细日志，包括哪一行代码可以运行，什么时候运行，局部变量变化等。具体时间等这个GitHub12.3KStarDebug工具的输出样式如下：左边是运行信息，右边是NumPy代码对应的复杂Debug工具，看起来更有说服力。另外在PyCharm上使用断点调试，还输出了各种变量的定义和取值，以及一堆详细的信息。那么能否有一种更优雅的Debug方法，能够以更简洁的信息快速帮助我们找到代码的问题呢？这是VSCode最新推出的可视化Debug，能够以图形化的方式快速展示数据结构。我们先来看看效果。在下面的动画中，将断点设置到第32行来定义双向链表，然后逐行运行代码，右侧显示相应的数据结构图。这个可视化非常优雅，工具会根据数据结构以不同的方式展示，比如树、表格、曲线和图形等。下面的动图展示了几种不同的可视化方式：效果真的很神奇，而且它采用了与以往Debug方式完全不同的呈现形式。目前VSCodeDebugVisualizer在JavaScript/TypeScript上效果比较好，在C#、Java和PHP上也正在积极测试中，其他语言也可以使用。安装此扩展后，使用命令<打开一个新的调试可视化工具视图>打开一个新的可视化工具视图。在该视图中，设置断点逐步执行后，表达式的执行和动态可视化将显示在其中。右上角的刷新键将当前可视化器视图弹出到一个新的浏览器窗口中，您还可以展开详细信息窗口以选择数据提取器和可视化调试器。可视调试器使用特定的JSON数据。支持的JSON数据模式，请参考原GitHub项目。当前的可视化表达式应该被评估为匹配支持的可视化修饰符的JSON对象字符串。并且这个JSON字符串可能被单引号??或双引号括起来（或者没有引号），所以转义字符不能被忽略。举个例子："{"kind":{"text":true},"text":"sometext\nmoretext"}"。对于TypeScript/JavaScript等语言，因为已经集成了数据抽取器，可以直接自动可视化。对于没有数据提取器的其他语言，你需要自定义数据结构和可视化器之间的关系。可以定制各种可视化工具。此扩展还内置了其他可定制的可视化调节器，特别是用于调试。非常直观，可以根据不同的加工对象选择更容易理解的可视化方式。比如图表可视化、Plotly可视化、Tree可视化、网格可视化、文本可视化等等。在种类非常丰富的同时，操作性也比较简单，效果也很直观。小编选择了几种类型作为例子：Plotly可视化AST可视化在使用AST可视化时也会显示源代码。选择其节点时，它还会突出显示源代码中的跨度。Python如何解决？Python语言是我们读者最常用的语言，但不幸的是，DebugVisualizer不支持Python数据结构的自动可视化。然而，Python开发者非常热情，尝试手动添加自定义可视化功能。项目维护者正在讨论添加对Python的支持，因此如果您想手动调用DebugVisualizer，开发人员在Demo中提交了一个新的Python示例。我们需要以JSON格式表示数据并完成自定义可视化。注意JSON需要满足DebugVisualizer的格式定义。如果在loop语句中设置断点，可以importjson_graph可视化结果，如下图是10个节点的可视化。在Reddit社区，很多开发者也在讨论是否可以使用Python，是否有更方便的方式自动可视化Debug，而不是在Debug之前手动配置。VSCodeDebugVisualizer真的很酷，但它对Python的支持更有趣。现在无论是项目维护者还是其他开发者都在关注这个问题，期待过段时间能完美支持Python。参考链接：https://www.reddit.com/r/programming/comments/f88zom/i_made_an_extension_for_visual_debugging_in_vs/id:almosthuman2014)》】点此阅读该作者更多好文
