VS Code调试可视化器使用指南-优快云博客

项目概述

【免费下载链接】vscode-debug-visualizer An extension for VS Code that visualizes data during debugging. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-debug-visualizer

VS Code调试可视化器是一款专为提升代码调试体验而设计的革命性扩展工具。通过直观的图表展示复杂数据结构，它彻底改变了开发者理解代码执行过程的方式。无论是算法学习、LeetCode刷题还是日常开发调试，这个工具都能提供无与伦比的可视化支持。

快速安装指南

极简安装流程

启动VS Code编辑器
访问扩展市场，搜索"调试可视化器"
一键安装扩展

操作步骤详解

打开目标代码文件
设置关键断点
启动调试模式（Ctrl+Shift+P）
输入"Debug Visualizer: New View"命令
在可视化界面输入数据表达式
按F10开始调试，见证数据结构的动态展示

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/index.js"
        }
    ]
}

支持的语言和调试器

查看demos目录中的示例代码。以下语言和调试器已验证可与本扩展配合使用：

JavaScript/TypeScript：使用node/node2/extensionHost/chrome/pwa-chrome/pwa-node调试适配器（完全支持）
Dart/Flutter：使用dart调试适配器（基础支持）
Go语言：使用go（Delve）调试适配器（基础支持）
Python：使用python调试适配器（基础支持）
C#：使用coreclr调试适配器（基础支持）
PHP：使用php调试适配器（基础支持）
Java：使用java调试适配器（基础支持）
C++：使用cppdbg调试适配器（基础支持）
Swift：使用lldb调试适配器（基础支持）
Rust：使用lldb调试适配器（基础支持）
Ruby：使用rdbg调试适配器（基础支持）

所有其他语言和调试器也可能正常工作。对于具有基础支持的语言，只能可视化JSON字符串，您必须实现一些逻辑来为您的数据结构构建此JSON！

使用方法

安装此扩展后，使用命令Debug Visualizer: New View打开新的可视化器视图。在此视图中，您可以输入在逐步执行应用程序时被评估和可视化的表达式。此视图的工作方式与VS Code的监视视图相同，只是结果值以视觉方式而非文本方式呈现。

使用命令Debug Visualizer: Use Selection as Expression（Shift + F1）将当前选定的文本用作最近打开的调试可视化器中的表达式。

支持的数据类型

并非所有值都可以处理。可视化器使用特定的JSON数据。此扩展使用通用的可视化框架。您可以查看其游乐场，了解哪些数据可以被可视化以及可视化效果如何。

当前监视的表达式应评估为JSON对象字符串，与支持的某个可视化器的模式匹配。此JSON字符串可以用单引号或双引号（或根本不用）括起来，并且不能转义。

对于某些语言（TypeScript/JavaScript），会注入运行时代码以支持数据提取器。数据提取器取消了可视化值必须是JSON字符串的要求，并充当自定义数据结构和可视化器处理的JSON数据之间的桥梁。

精选演示案例

双向链表反转

随机漫步

抽象语法树可视化器

表格可视化器

JavaScript/TypeScript集成数据提取器

数据提取器将任意值转换为可视化器可使用的数据。它们位于调试对象中。当使用node、node2、extensionHost、chrome或pwa-chrome调试适配器时，此扩展会自动将以下数据提取器注入到调试对象中。也可以注册自定义数据提取器。

ToString：对值调用.toString()并将结果视为文本
TypeScript AST：直接可视化ts.Node，可视化Record<string, ts.Node>和ts.Node[]
As Is Data Extractor：将数据视为可视化器的直接输入
Use Method 'getVisualizationData'：对值调用.getVisualizationData()并将结果视为可视化器的直接输入
Plotly y-Values：使用plotly绘制数字数组
Object Graph：构造包含从表达式评估到的对象可访问的所有对象的图形

UI特性

多行表达式：按shift+enter添加新行，按ctrl+enter评估表达式。当只有一行时，enter提交当前表达式，但当有多行时，enter插入另一个换行符。

配置选项

此扩展提供以下配置选项：

debugVisualizer.debugAdapterConfigurations

允许为特定的调试适配器类型设置表达式模板。此处的配置会覆盖相应调试适配器类型的内置支持。

"debugVisualizer.debugAdapterConfigurations": {
    "lldb": {
        "expressionTemplate": "script to_json(\"${expr}\")",
        "context": "repl"
    }
}

debugVisualizer.useChromeKioskMode

指定是否在Kiosk模式下使用Chrome弹出调试可视化视图。否则使用默认浏览器，如果找不到Chrome。默认为true。

debugVisualizer.js.customScriptPaths

指定在调试JavaScript时注入到调试对象中的JavaScript文件列表。每个脚本必须使用类型为LoadDataExtractorsFn的函数分配module.exports。

开发环境搭建

构建说明

克隆仓库：git clone https://gitcode.com/gh_mirrors/vs/vscode-debug-visualizer
在仓库根目录运行yarn
运行yarn build

开发环境配置

此项目使用yarn工作区，由子项目data-extraction、extension和webview组成。要设置开发环境，请按照以下步骤操作：

克隆仓库
在仓库根目录运行yarn
初始运行yarn build（或为每个子项目运行yarn dev）
为您正在处理的子项目（即在其文件夹中）运行yarn dev

对于webview项目，yarn dev将在端口8080上提供React应用程序。需要设置某些查询参数，以便UI可以连接到调试可视化器扩展。

您可以使用VS Code启动和调试扩展。选择预配置的Run Extension (Dev UI)作为调试配置，以便扩展从webpack服务器加载UI。

实战应用场景

场景一：复杂数据结构解析

面对复杂的树形或图形数据结构时，调试可视化器能将其转化为清晰的视觉图表，大幅提升问题定位效率。

场景二：算法学习辅助工具

在学习数据结构和算法过程中，可视化工具让抽象概念变得具体可见，提升理解效率。

高效使用技巧

智能调试策略：在调试复杂逻辑时优先启用可视化功能
学习优化方案：结合可视化工具理解算法执行流程
问题排查指南：利用图表快速识别数据结构异常

掌握这些技巧，您将能充分发挥VS Code调试可视化器的强大功能，让代码调试和数据结构学习变得前所未有的直观高效！

【免费下载链接】vscode-debug-visualizer An extension for VS Code that visualizes data during debugging. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-debug-visualizer

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考