VScode数据结构可视化神器！-技术圈

↓↓↓点击关注，回复资料，10个G的惊喜

【导读】VSCode Debug Visualizer是VSCode扩展，可在编辑器中可视化数据结构。这对于在调试期间可视化监视的值很有用。该扩展名有助于可视化图，表，数组，直方图和树。

扩展链接：

https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer

原文链接:

https://addyosmani.com/blog/visualize-data-structures-vscode/

官方样例

VSCode Debug Visualizer的JavaScript示例包含在主存储库中。要开始使用它们，请检查是否已安装yarn和node，然后：

复制下列仓库代码：
https://github.com/hediet/vscode-debug-visualizer
运行yarn,安装依赖包
在VScode 中打开仓库，并标记Debug点

开始debug

选择可视化工具

即可显示可视结果

更多可视化例子

数组

const range = [1, 2, 33, 31, 1, 2, 63, 943, 346, 24, 123, 6, 32];

const example1 = {"kind": { "graph": true },"nodes": [        { "id": "1", "label": "1" },        { "id": "2", "label": "2", "color": "orange" },        { "id": "3", "label": "3" }    ],"edges": [        { "from": "1", "to": "2", "color": "red" },        { "from": "1", "to": "3" }    ]};

图

表格

const table = {"kind": { "table": true },"rows": [        { "userId": 1, "country": "us", "amount": 2 },        { "userId": 2, "country": "ie", "amount": 1 },        { "userId": 2, "country": "de", "amount": 1 },        { "userId": 1, "country": "us" }    ]};

曲线图

const example2 = {"kind": {"plotly": true    },"data": [{"y": [67, 58, 62, 65, 72],"name": "Production"        },        {"y": [69, 55, 67, 68, 73],"name": "Staging"        }    ]};

准备写本书
麻省理工公开课：微积分
太骚了，用Excel玩机器学习！
如何评判一个深度学习框架？
机器学习理论基础到底有多可靠？