免费获取策划方案多一份参考,总有益处

重庆网站建设

Website construction

案例778

重庆网站建设

在VSCode中可视化数据结构

来源:派臣科技|时间:2020-10-09|浏览:

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}等条目,它们是这个模式的一部分。

留言

返回顶部

君
重庆网站建设重庆网站建设在VSCode中可视化数据结构