VScode数据结构可视化神器！

统计学家

发布于 2022-04-11 19:54:32

2.5K0

发布于 2022-04-11 19:54:32

文章被收录于专栏：机器学习与统计学

【导读】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"
        }
    ]
};