實時可視化Debug：VS Code 開源新神器

用于在調(diào)試期間可視化數(shù)據(jù)結(jié)構(gòu)的 VS Code 擴(kuò)展。

效果圖

用法

安裝此擴(kuò)展后，使用命令 Open a new Debug Visualizer View 打開新的可視化器視圖。在這個視圖中，你可以輸入一個表達(dá)式，該表達(dá)式在逐步分析你的代碼時會進(jìn)行評估和可視化，例如

{?
????kind:?{?graph:?true?},?
????nodes:?[?{?id:?"1",?label:?"1"?},?{?id:?"2",?label:?"2"?}?],?
????edges:?[{?from:?"1",?to:?"2",?label:?"edge"?}]
}

你可以通過編寫自己的函數(shù)，從自定義數(shù)據(jù)結(jié)構(gòu)中提取這些調(diào)試數(shù)據(jù)。請參閱 https://github.com/hediet/vscode-debug-visualizer/raw/master/data-extraction/README.md 以獲取 createGraphFromPointers 的文檔。

集成式展示臺

可視化工具用于顯示由數(shù)據(jù)提取器提取的數(shù)據(jù)?？梢暬ぞ呤牵ù蟛糠郑㏑eact 組件，位于擴(kuò)展程序的 Web 視圖中。

圖形可視化

Graphviz 和 vis.js 可視化器渲染與 Graph 接口匹配的數(shù)據(jù)。

interface?Graph?{
????kind:?{?graph:?true?};
????nodes:?NodeGraphData[];
????edges:?EdgeGraphData[];
}

interface?NodeGraphData?{
????id:?string;
????label:?string;
????color?:?string;
}

interface?EdgeGraphData?{
????from:?string;
????to:?string;
????label:?string;
????id?:?string;
????color?:?string;
????weight?:?number;
}

graphviz 可視化工具使用 SVG 查看器來渲染由 viz.js 創(chuàng)建的 SVG。

可視化

export?interface?Plotly?{
????kind:?{?plotly:?true?};
????data:?Partial[];
}
//?See?plotly?docs?for?Plotly.Data.

Tree Visualization

插件地址：

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

1.如果看到這里，讓更多人看到這篇文章，請?轉(zhuǎn)發(fā)、點贊、在看

2.關(guān)注公眾號前端人，回復(fù)資料包領(lǐng)取我整理的前端進(jìn)階資料包

3.回復(fù)加群，加入前端進(jìn)階群，和小伙伴一起學(xué)習(xí)討論!