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

Henning Dieterichs

翻譯：瘋狂的技術宅

https://marketplace.visualstu...

未經容許嚴禁轉載

用於在調試期間可視化數據結構的 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/vsc... 以獲取 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 Visualization

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。

也能夠看看

這個擴展能夠與個人庫 @hediet/node-reload 一塊兒很好地工做。他們在一塊兒提供了一個交互式 typescript 演示器。

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...