VSCode Debug Visualizer是一个VSCode扩展，它允许您在编辑器中可视化数据结构。这对于在调试期间可视化监视值非常有用。我发现这个扩展可以帮助可视化图形、表、数组、直方图和树。
安装扩展之后，打开一些相关的脚本，然后导航到命令面板，并进入Debug Visualizer: New View。此视图允许您输入在单步执行代码时可视化的表达式。它与VS代码的watch视图非常相似，其核心区别在于结果是可视化的，而不是以文本格式显示。
如果您选择了要可视化的文本，那么Debug Visualizer:使用selection as表达式可以计算在您打开的最后一个Debug Visualizer窗口中选择的当前文本。
VSCode Debug Visualizer的JavaScript示例包含在主存储库中。要开始使用它们，请检查是否安装了纱线和节点，然后:
在本地克隆存储库。完成之后，导航到demos/js目录。
运行纱线来安装依赖项。我需要手动运行yarn add @hediet/调试-visualizer-data extraction来让一切正常运行。
在VSCode中打开repo并选择一个示例。如demo_doubly-linked-list.ts
在源代码的某个地方添加断点/调试器语句(例如第50行)。
进入运行>开始调试并选择一个环境(例如Node.js(预览))。
从命令面板中，选择Debug Visualizer: New View。
现在，您应该能够在提示符中输入visualize()，并在编辑器中看到双重链接列表的可视化图形.
在您自己的示例中尝试扩展之前，请注意，您希望可视化的表达式必须计算为一个JSON对象字符串，并与扩展所支持的一个可视化器的模式(数组等简单数据类型之外)匹配。在下面的例子中，注意“kind”:{“graph”:true}、“kind”:{“plotly”:true}等条目，它们是这个模式的一部分。
