新项目详细地址：https://github.com/hediet/vscode-debug-visualizer
写代码，在所难免碰到各种各样神秘的问题，代码短我们在脑子里「运行」一遍也就类似能找到缘故。但代码如果较为长，不正确就会掩藏非常深了，这个时候，无论你是选用 print() 秘笈，或是灵活运用 assert 句子，或是索性设定中断点，DeBug 一直一条渐渐地清除的路面。
以前机器之心曾详细介绍过简约 DeBug 专用工具 PySnooper ，大家只要向有兴趣的函数公式提升一个装饰器，就能获得该函数公式的详尽 log，包括哪行代码能运行、何时运行及其当地自变量转变的准确時间这些。这一 GitHub 12.3K Star 量的 DeBug 专用工具，輸出设计风格是那样色的：
左侧是运行信息，右侧是相匹配 NumPy 代码
这类错综复杂的 DeBug 专用工具，看上去就较为辞退。除此之外，在 PyCharm 上应用断点调试，它輸出的也是各种各样变量的定义与值，一样是一堆详尽信息。
那麼能否有一种更高贵的 DeBug 方式，以更简约的信息迅速帮大家寻找代码的存在的问题?这就是 VS Code 全新发布的可视化 DeBug，它能以象的方式迅速展现算法设计。
大家先看一下实际效果，如下所示动态图将中断点设定为第 32 行界定双向链表，接着一行行运行代码就会在下图展示出相匹配的数据结构图。
这类可视化十分雅致，并且该专用工具也会依据算法设计以不一样的方式呈现，例如树型、报表、曲线图和图等。如下所示动态图展现几类不一样的可视化方式：
实际效果上的确十分震撼，它与先前的 DeBug 方式选用彻底不一样的呈现方式。现阶段该 VS Code Debug Visualizer 在 JavaScript/TypeScript 上面有比较好的实际效果，在 C#、Java 和 PHP 上也已经积极主动检测，其他语言表达也还都能用。
恰当的应用姿态
安裝此扩展程序后，应用指令< Open a new Debug Visualizer View >开启新的可视化主视图。在这里主视图里，设定中断点逐渐实行后，关系式的实行与动态性可视化都是会展现在里面。右上方的更新键可将当下的可视化专用工具主视图弹出来到新的电脑浏览器对话框，与此同时还能根据进行详尽信息的界面去挑选数据信息获取器及其可视化程序调试。
可视化调试器应用的是相应的 JSON 数据信息，有关适用的 JSON 数据信息方式可参照原 GitHub 新项目。
现阶段的可视化关系式应该是做为 JSON 目标字符串数组来实现计算的，并与所适用的可视化控制器相符合。而这一 JSON 字符串数组很有可能被反斜杠或是引号所包括(也是有很有可能沒有冒号)，因而不可以忽视转义符。
举一个实例：
针对 TypeScript/JavaScript 等语言表达，由于早已集成化了数据抽取器，因而可以同时全自动可视化。而其他沒有数据抽取器的语言表达，就必须自定算法设计与可视化器相互关系了
多种多样可视化器皆可订制
该拓展还内嵌了别的可修改的可视化控制器，特别是在在 debug 时应用起來十分形象化，可以依据应对差异的正确处理目标，可挑选更容易了解的可视化方式。例如数据图表可视化，Plotly 可视化，Tree 可视化，网格图可视化，文字可视化这些。在其类型比较丰富的与此同时，可操作性也比较简单，实际效果十分形象化，我选择了多种种类做为实例：
Plotly 可视化
AST 可视化
在应用 AST 可视化还会继续展现源代码，在挑选其连接点时，还会继续突显源代码中的跨距。
Python 怎么解?
大家阅读者最经常使用的便是 Python 语言表达，殊不知可惜的是，Debug Visualizer 并不兼容 Python 算法设计的全自动可视化。但是，Python 开发人员或是十分热心的，她们试着手动式加上自定可视化作用。
新项目维护者已经探讨加上对 Python 的适用
那麼假如要手动式启用 Debug Visualizer，开发人员在 Demo 中澳递交了一个 Python 实例。大家必须以 JSON 文件格式来表达数据信息，并进行自定可视化，留意该 JSON 必须达到 Debug Visualizer 的形式界定。
假如在for语句中如何设置中断点，那麼就可以导进 json_graph 来可视化結果，如下所示所显示为 10 个连接点的可视化展现。
在 Reddit 小区上，也是有许多开发人员在探讨 Python 是否能用，是否有更快捷的方式全自动可视化 DeBug，而不是在 DeBug 前还要手动式先配备一番。
VS Code Debug Visualizer 的确十分酷，但适用 Python 的它会更有趣。如今无论是新项目维护者或是其他开发人员，都是在关心这个问题，希望过一段时间它能很好的适用 Python。
参照连接：https://www.reddit.com/r/programming/comments/f88zom/i_made_an_extension_for_visual_debugging_in_vs/
【文中是51CTO栏目组织“机器之心”的原創译文翻译，微信公众平台“机器之心( id: almosthuman2014)”】
戳这儿，看该创作者大量好文章