用于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
