用於VS Code調試的可視化數據插件：Debug Visualizer
- 2020 年 2 月 26 日
- 筆記
每日前端夜話第282篇
翻譯：瘋狂的技術宅
作者：Henning Dieterichs
來源：visualstudio
正文共：1608 字
預計閱讀時間：6分鐘
用於在調試期間可視化數據結構的 VS Code 擴展。
用法
安裝此擴展後，使用命令 Open a new Debug Visualizer View 打開新的可視化器視圖。在這個視圖中，你可以輸入一個表達式，該表達式在逐步分析你的程式碼時會進行評估和可視化，例如
{ kind: { graph: true }, nodes: [ { id: "1", label: "1" }, { id: "2", label: "2" } ], edges: [{ from: "1", to: "2", label: "edge" }] }
你可以通過編寫自己的函數，從自定義數據結構中提取這些調試數據。請參閱 https://github.com/hediet/vscode-debug-visualizer/raw/master/data-extraction/README.md 以獲取 createGraphFromPointers 的文檔。
集成式展示台
可視化工具用於顯示由數據提取器提取的數據。可視化工具是（大部分）React 組件，位於擴展程式的 Web 視圖中。
圖形可視化
Graphviz 和 vis.js 可視化器渲染與 Graph 介面匹配的數據。
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 創建的 SVG。
可視化
export interface Plotly { kind: { plotly: true }; data: Partial<Plotly.Data>[]; } // See plotly docs for Plotly.Data.
Tree 可視化
樹可視化器渲染與 Tree 介面匹配的數據。
interface Tree<TData = unknown> { kind: { tree: true }; root: TreeNode<TData>; } interface TreeNode<TExtraData> { id: string | undefined; name: string; value: string | undefined; emphasizedValue: string | undefined; children: TreeNode<TExtraData>[]; data: TExtraData; isMarked: boolean; }
AST 可視化
AST 可視化器渲染與 Ast 介面匹配的數據。
interface Ast extends Tree<{ position: number; length: number; }>, Text { kind: { text: true; tree: true; ast: true }; }
除樹視圖外，還顯示文本表示。
文本可視化
文本可視化器渲染與 Text 介面匹配的數據。
interface Text { kind: { text: true }; text: string; mimeType?: string; fileName?: string; }
mimeType 和 fileName 的文件擴展名用於語法突出顯示。
SVG 可視化
SVG可視化器渲染與 Svg 介面匹配的數據。實際的 SVG 數據必須存儲在 text 中。
interface Svg extends Text { kind: { text: true; svg: true }; }
點圖可視化
點圖可視化器渲染與 DotGraph 介面匹配的數據。
interface DotGraph extends Text { kind: { text: true; dotGraph: true }; }
Viz.js（Graphviz）用於渲染。
集成數據提取器
數據提取器可將任意值轉換為可視化數據。他們存在於被調試者中。此擴展會自動注入以下數據提取器。你也可以註冊自定義數據提取器。
ToString
只需對值調用 .toString() 並將結果視為文本。
TypeScript AST
- 直接可視化
ts.Node Record和[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)。
也可以看看
這個擴展可以與我的庫 @hediet/node-reload (https://github.com/hediet/node-reload) 一起很好地工作。他們在一起提供了一個互動式 typescript 演示器。
原文鏈接
https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer
