- 当前位置：首页 >数据库 >VS Code调试太难？这款可视化代码调试工具值得拥有
VS Code调试太难？这款可视化代码调试工具值得拥有
发布时间：2025-11-05 07:38:04 来源：创站工坊 作者：IT科技
这是调试代码调试一个在调试期间可视化数据结构的 VS Code 扩展，使用它之后，太难你可以清晰明了的视化看到不同数据之间的关系。
一个名叫 hediet 的工具外国程序员开源了一个在调试期间可视化数据结构的 VS Code 扩展——Debug Visualizer。
这个扩展程序可以在 VS Code 中调试任何编程语言，调试代码调试当然，太难目前最适配的视化编程语言是 JavaScript 和 TypeScript，另外 C#、工具Java 和 PHP 也进行了相应的调试代码调试测试。
1. 如何安装使用？太难
安装此扩展后，使用命令 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" }]你可以通过编写自己的函数，从自定义数据结构中提取这些调试数据。
2. 哪些数据可被可视化呢？
很多人可能会问，这个可视化代码调试工具都支持哪些东西可视化呢？基本上你能想到的，它都可以做到可视化。企商汇
图形可视化
Graphviz 和 Vis.js 可视化工具可以渲染与 Graph 界面匹配的数据。
interface Graph { kind: { graph: true }; nodes: NodeGraphData[]; edges: EdgeGraphData[]; } interface NodeGraphData { id: string; label?: string; color?: string; shape?: "ellipse" | "box"; } interface EdgeGraphData { from: string; to: string; label?: string; id?: string; color?: string; dashes?: boolean; }graphviz 可视化工具可以通过使用 SVG 查看器来查看 viz.js 创建的 SVG。
Plotly 可视化
plotly visualizer 可以通过 plotly 来渲染与界面匹配的 JSON 数据。
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 }; }除了树视图外，AST 可视化工具还会高亮显示源代码的来源。
Grid 可视化
Grid 可视化工具会渲染与以下接口匹配的数据。
export interface Grid { kind: { array: true }; columnLabels?: { label?: string }[]; rows: { label?: string; columns: { content?: string; tag?: string; color?: string; }[]; }[]; markers?: { id: string; row: number; column: number; rows?: number; columns?: number; label?: string; color?: string; }[]; }Text 可视化
文本可视化工具渲染与 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）用于渲染。
3. 哪些数据可被提取？
该工具中包含有 JavaScript/TypeScript 数据提取器，数据提取器可将任意值转换为可视化数据。这个扩展会自动在被调试者中注入以下数据提取器，当然用户也可以注册自定义数据提取器。
ToString
只需对值调用 .toString() ，亿华云计算就可将数据转换为文本类型。
TypeScript AST
直接可视化 ts.Node Record 和 [ts.Node] 的可视化。如果记录包含 fn 键，则将为每个节点显示它们的值。As Is 数据提取器
将数据直接输入到可视化工具。
使用方法 getDebugVisualization
调用 .getDebugVisualization()，就可将数据转换为可视化工具的直接输入。
Plotly y-Values
使用 plotly 绘制数字数组。
对象图
构造一个图形，其中包含从表达式求值到的对象可到达的所有对象。使用广度搜索构造图，在 50 个节点后停止。
Array Grid
可以为数组数据创建 Grid visualization。
4. 其它事项
该扩展支持多行表达式，例如点击 shift+enter 可添加新行，点击 ctrl+enter 可计算表达式。当只有一行时， enter 是提交当前表达式，当有多行时，enter 插入另一个换行符。
经过该扩展程序开发者的测试，可与 TypeScript / JavaScript 库一起很好地工作。
GitHub 开源地址：
https://github.com/hediet/vscode-debug-visualizer/tree/master/extension
- 解决电脑蓝牙启动数据错误的方法（排查和修复蓝牙启动数据错误的步骤）
- 忘记OPPO账号密码怎么解锁？（解决OPPO账号密码遗忘问题的有效方法）
- 华硕飞行堡垒安装教程（一步步教你轻松安装华硕飞行堡垒防御系统）
- 使用DellU盘安装系统教程（轻松操作，快速安装，让您的电脑焕发新生）
- 适马30mmf1.4镜头的魅力与表现（探索适马30mmf1.4镜头的优点和应用领域）
- 以惠普光盘重装系统教程，轻松恢复电脑出厂设置（通过以下步骤，了解如何使用惠普光盘快速重装系统）
- 韩博士U盘一键重装教程——轻松搞定电脑恢复问题（简单易行的一键重装教程，解决电脑系统崩溃的难题）
- 华擎970a主板超频教程（了解超频技术与华擎970a主板的完美结合）
- 电脑开机总提示错误恢复（解决电脑开机错误的有效方法）
- 如何与小冰虚拟女友分手教程（告别冷漠，结束虚拟情缘的正确方式）
- 电脑开机错误00005（深入了解电脑开机错误00005，避免数据丢失和系统崩溃）
- 详细教程（一步步教你使用PE原版Win10ISO进行系统安装，无需专业知识）
- 华硕U盘系统教程Win7（华硕U盘系统安装教程，让Win7安装变得易如反掌）
- 黑客锁芯（利用创新科技保护个人财产安全的关键）
- 技嘉主板H61MS1——性能稳定可靠的选择（技嘉主板H61MS1的特点与优势）
- 康佳R7（颠覆你对手机的认知，康佳R7让你爱不释手）
- 详解2345PC系统安装教程（轻松学会安装2345PC系统，畅享电脑使用乐趣）
- 双系统下使用PE重装系统的完整教程（从零开始，轻松解决重装系统的难题）
- 三星NX1855镜头的性能与特点（探索三星NX1855镜头的出色画质和创造性能）
- UEFI启动系统教程（掌握UEFI启动系统的技巧，轻松安装操作系统）
随便看看
- Copyright © 2025 Powered by VS Code调试太难？这款可视化代码调试工具值得拥有,创站工坊 滇ICP备2023006006号-44sitemap