用於VS Code調試的可視化數據插件：Debug Visualizer

安裝此擴展後，使用命令 Open a new Debug Visualizer View 打開新的可視化器視圖。在這個視圖中，你可以輸入一個表達式，該表達式在逐步分析你的代碼時會進行評估和可視化，例如1{ 2 kind: { graph: true }, 3 nodes: [ { id: “1”, label: “1” }, { id: “2”, label: “2” } ], 4 edges: [{ from: “1”, to: “2”, label: “edge” }]5}複製代碼你可以通過編寫自己的函數，從自定義數據結構中提取這些調試數據。請參閱 https://github.com/hediet/vscode-debug-visualizer/raw/master/data-extraction/README.md 以獲取 createGraphFromPointers 的文檔。集成式展示臺可視化工具用於顯示由數據提取器提取的數據。可視化工具是（大部分）React 組件，位於擴展程序的 Web 視圖中。圖形可視化Graphviz 和 vis.js 可視化器渲染與 Graph 接口匹配的數據。 1interface Graph { 2 kind: { graph: true }; 3 nodes: NodeGraphData[]; 4 edges: EdgeGraphData[]; 5} 6 7interface NodeGraphData { 8 id: string; 9 label: string;10 color?: string;11}1213interface EdgeGraphData {14 from: string;15 to: string;16 label: string;17 id?: string;18 color?: string;19 weight?: number;20}複製代碼graphviz 可視化工具使用 SVG 查看器來渲染由 viz.js 創建的 SVG。可視化1export interface Plotly {2 kind: { plotly: true };3 data: Partial<Plotly.Data>[];4}5// See plotly docs for Plotly.Data.複製代碼Tree 可視化樹可視化器渲染與 Tree 接口匹配的數據。 1interface Tree<TData = unknown> { 2 kind: { tree: true }; 3 root: TreeNode; 4} 5interface TreeNode { 6 id: string | undefined; 7 name: string; 8 value: string | undefined; 9 emphasizedValue: string | undefined;10 children: TreeNode[];11 data: TExtraData;12 isMarked: boolean;13}複製代碼AST 可視化AST 可視化器渲染與 Ast 接口匹配的數據。1interface Ast2 extends Tree<{3 position: number;4 length: number;5 }>,6 Text {7 kind: { text: true; tree: true; ast: true };8}複製代碼除樹視圖外，還顯示文本表示。文本可視化文本可視化器渲染與 Text 接口匹配的數據。1interface Text {2 kind: { text: true };3 text: string;4 mimeType?: string;5 fileName?: string;6}複製代碼mimeType 和 fileName 的文件擴展名用於語法突出顯示。SVG 可視化SVG可視化器渲染與 Svg 接口匹配的數據。實際的 SVG 數據必須存儲在 text 中。1interface Svg extends Text {2 kind: { text: true; svg: true };3}複製代碼點圖可視化點圖可視化器渲染與 DotGraph 接口匹配的數據。1interface DotGraph extends Text {2 kind: { text: true; dotGraph: true };3}複製代碼Viz.js（Graphviz）用於渲染。集成數據提取器數據提取器可將任意值轉換爲可視化數據。他們存在於被調試者中。此擴展會自動注入以下數據提取器。你也可以註冊自定義數據提取器。ToString只需對值調用 .toString() 並將結果視爲文本。TypeScript AST直接可視化 ts.NodeRecord 和 [ts.Node] 的可視化。如果記錄包含 fn 鍵，則將爲每個節點顯示它們的值。As Is 數據提取器將數據直接輸入到可視化工具。使用方法 'getDebugVisualization’在值上調用 .getDebugVisualization()，並將結果視爲對可視化工具的直接輸入。Plotly y-Values使用 plotly 繪製數字數組。對象圖構造一個圖形，其中包含從表達式求值到的對象可到達的所有對象。使用廣度搜索構造圖。在 50 個節點後停止。UI 功能多行表達式：按 shift+enter 添加新行，按 ctrl+enter 計算表達式。當只有一行時，enter 提交當前表達式，但是當有多行時，enter插入另一個換行符。侷限性當前，僅 JavaScript（以及TypeScript）的值可以可視化，並且僅支持少量可視化。該體系結構足夠強大，將來可以支持其他語言。@hediet/debug-visualizer-data-extraction一個通過提供基礎結構以實現和註冊自定義數據提取器的庫。有關更多信息，請參見庫的 README (https://github.com/hediet/vscode-debug-visualizer/raw/master/data-extraction/README.md)。