VsCode插件开发 - odin-DebugWindows

在调试过程中，你是否遇到过这样的困扰：想要查看一个复杂的数据结构（如 DataTable、List、Dictionary），但在调试窗口中只能看到简单的字符串表示，无法直观地查看数据内容？今天我要向大家介绍一款我开发的 VSCode 扩展插件——odin-DebugWindows，它可以让调试过程变得更加高效和直观。

让调试更高效：odin-DebugWindows - 一个强大的 VSCode 调试窗口扩展

📖 插件简介

odin-DebugWindows 是一款专为 VSCode 开发的调试辅助扩展。它的核心功能是：当程序在调试模式下暂停时，你可以直接在调试窗口中输入变量名，插件会自动解析变量值并以表格形式展示，支持分页、筛选、导出等功能。

为什么需要这个插件？

在日常开发中，我们经常需要调试复杂的数据结构：

• C# 开发：查看 DataTable、List<T>、Dictionary<TKey, TValue> 等集合类型
• JavaScript/TypeScript 开发：查看 JSON 对象、数组等数据结构
• 数据验证：需要快速查看大量数据，验证数据是否正确

传统的调试方式存在以下问题：

1. 数据展示不直观：复杂对象在调试窗口中只能看到类型和简单信息
2. 数据量大时难以查看：没有分页和筛选功能
3. 无法导出数据：无法将调试数据导出进行分析

odin-DebugWindows 正是为了解决这些问题而诞生的。

✨ 核心功能

1. 智能变量解析

插件支持多种编程语言和数据类型：

JavaScript/TypeScript 支持

• ✅ JSON 对象/数组（自动解析 JSON 字符串，包括多重转义）
• ✅ 数组（对象数组、简单值数组）
• ✅ 对象（普通 JavaScript 对象）
• ✅ 类数组对象（NodeList、Arguments 等）
• ✅ 基本类型

C# 支持

• ✅ DataTable - 完整解析列和行数据
• ✅ List- 自动遍历列表元素
• ✅ Dictionary<TKey, TValue> - 键值对展示
• ✅ 数组、对象、基本类型

2. 强大的表格功能

解析后的数据会以表格形式展示，支持：

• 分页显示：每页显示 20 行数据，支持大量数据浏览
• 实时筛选：输入关键词快速过滤数据
• 数据导出：一键导出为 CSV 或 Excel 格式
• 响应式设计：适配不同窗口大小

3. 智能建议

• 自动获取当前调试上下文中的变量
• 输入时显示变量名建议
• 支持键盘导航选择

4. 项目类型自动检测

插件会自动检测项目类型（C#、JavaScript、TypeScript、Vue、Python、Java、Go、Rust 等），并根据项目类型选择相应的解析器。

🚀 快速开始

安装方式

方式一：从 VSIX 安装

1. 下载最新版本的 .vsix 文件
2. 在 VSCode 中按 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac)
3. 输入 Extensions: Install from VSIX...
4. 选择下载的 .vsix 文件

方式二：从源码安装

git clone https://gitee.com/odinsam/debug-window.git
cd debug-window
npm install
npm run compile
# 按 F5 键在扩展开发宿主窗口中运行

基本使用

1. 启动调试

   • 在 VSCode 中启动调试会话（按 F5）
   • 在断点处暂停程序

2. 打开调试窗口

   • 在侧边栏找到"调试窗口"面板
   • 或使用命令面板：Ctrl+Shift+P → 显示调试窗口

3. 解析变量

   • 在输入框中输入变量名（如 users、dataTable）
   • 按回车键
   • 变量值会自动解析并显示为表格

4. 操作表格

   • 使用筛选框过滤数据
   • 使用分页按钮浏览数据
   • 点击导出按钮导出为 CSV 或 Excel

💡 使用示例

JavaScript/TypeScript 示例

假设我们有以下代码：

// 对象数组
const users = [
  { id: 1, name: "张三", age: 25, city: "北京" },
  { id: 2, name: "李四", age: 30, city: "上海" },
  { id: 3, name: "王五", age: 28, city: "广州" }
];

// JSON 字符串
const jsonStr = '[{"id":1,"name":"张三"},{"id":2,"name":"李四"}]';

在调试窗口中输入 users 或 jsonStr，插件会自动解析并显示为表格：

id	name	age	city
1	张三	25	北京
2	李四	30	上海
3	王五	28	广州

C# 示例

DataTable 解析

DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Age", typeof(int));
dt.Rows.Add(1, "张三", 25);
dt.Rows.Add(2, "李四", 30);
dt.Rows.Add(3, "王五", 28);

在调试窗口中输入 dt，插件会：

1. 自动获取列名（ID, Name, Age）
2. 遍历所有行数据
3. 以表格形式展示

List解析

List<User> users = new List<User>
{
    new User { Id = 1, Name = "张三", Age = 25 },
    new User { Id = 2, Name = "李四", Age = 30 }
};

输入 users 后，插件会自动遍历列表中的每个元素，提取属性并展示为表格。

Dictionary<TKey, TValue> 解析

Dictionary<string, string> dict = new Dictionary<string, string>();
dict.Add("name", "张三");
dict.Add("city", "北京");
dict.Add("job", "工程师");

输入 dict 后，会显示为键值对表格：

键	值
name	张三
city	北京
job	工程师

🏗️ 技术实现

架构设计

插件采用模块化、面向对象的设计：

src/
├── extension.ts              # 扩展入口
├── parsers/                 # 解析器模块
│   ├── VariableParser.ts    # 解析器基类
│   ├── JavaScriptParser.ts  # JavaScript/TypeScript 解析器
│   └── CSharpParser.ts      # C# 解析器
├── providers/               # 提供者模块
│   └── DebugWindowViewProvider.ts  # 调试窗口视图提供者
├── types/                   # 类型定义
└── utils/                   # 工具类
    ├── ProjectTypeDetector.ts  # 项目类型检测
    └── TableExporter.ts       # 表格导出工具

核心特性

1. 解析器模式

插件使用策略模式实现不同类型的解析器：

• VariableParser：抽象基类，提供通用方法（arrayToTable、objectToTable 等）
• JavaScriptParser：处理 JavaScript/TypeScript 变量
• CSharpParser：处理 C# 特定类型（DataTable、List、Dictionary）

这种设计使得扩展新语言支持变得非常简单，只需：

1. 创建新的解析器类（继承 VariableParser）
2. 实现 parse() 和 supports() 方法
3. 在 DebugWindowViewProvider 中注册

2. 复杂类型处理

对于 C# 的复杂类型，插件通过 VSCode 调试 API 递归获取数据：

DataTable 解析流程：

1. 获取列名：通过 evaluate 表达式获取 dataTable.Columns[i].ColumnName
2. 获取行数据：遍历 dataTable.Rows[i]，提取 ItemArray 值
3. 格式化数据：清理引号、格式化日期等

Dictionary 解析流程：

1. 通过 variablesReference 获取 KeyValuePair 数组
2. 对每个 KeyValuePair，获取 Key 和 Value
3. 构建键值对表格

3. JSON 字符串处理

插件能够处理多重转义的 JSON 字符串：

// 处理这种情况：
const str = '"[{\\\"id\\\":1,\\\"name\\\":\\\"张三\\\"}]"'
// 插件会自动解析为对象数组

4. 智能建议

插件通过 VSCode 调试 API 获取当前作用域的所有变量，并在用户输入时提供智能建议。

🎯 使用场景

场景一：调试 API 返回数据

// 调用 API 获取用户列表
const response = await fetch('/api/users');
const users = await response.json();

// 在调试窗口中输入 users，快速查看数据结构

场景二：验证数据库查询结果

// C# 中查询数据库
DataTable dt = ExecuteQuery("SELECT * FROM Users WHERE Age > 25");

// 在调试窗口中输入 dt，查看查询结果

场景三：分析复杂对象结构

// 复杂的嵌套对象
const data = {
  users: [
    { id: 1, profile: { name: "张三", contacts: [...] } }
  ],
  metadata: { total: 100, page: 1 }
};

// 输入 data.users，查看用户列表
// 输入 data.metadata，查看元数据

场景四：导出调试数据

当需要将调试数据分享给团队成员或进行进一步分析时，可以直接导出为 CSV 或 Excel 格式。

🔧 高级功能

1. 编译时自动清理

插件会在检测到编译任务时自动清空调试窗口，避免旧数据干扰。

2. 支持的命令

在输入框中可以输入以下命令：

• help - 显示帮助信息
• clear - 清空消息和表格
• time - 显示当前时间
• project - 显示当前项目类型

3. 扩展性

插件采用模块化设计，可以轻松扩展：

• 添加新的语言支持（Python、Java、Go 等）
• 添加新的数据类型解析器
• 自定义表格显示样式

详细扩展指南请查看：扩展指南.md

📊 性能优化

• 分页显示：大量数据时只渲染当前页，提升性能
• 懒加载：按需获取变量数据，避免不必要的 API 调用
• 缓存机制：缓存已解析的数据，避免重复解析

🐛 问题排查

问题：变量解析失败

可能原因：

1. 变量不在当前作用域
2. 变量类型不支持
3. 调试会话未暂停

解决方案：

• 确保程序在断点处暂停
• 检查变量名是否正确
• 查看控制台错误信息

问题：表格显示为空

可能原因：

1. 数据为空
2. 解析失败（查看消息窗口的错误信息）

解决方案：

• 检查变量是否有数据
• 查看消息窗口的错误提示

🚧 未来计划

• [ ] 支持更多编程语言（Python、Java、Go、Rust 等）
• [ ] 支持更多数据类型（pandas DataFrame、numpy array 等）
• [ ] 添加表格排序功能
• [ ] 支持自定义解析器
• [ ] 添加数据可视化（图表展示）
• [ ] 支持多变量对比

📝 总结

odin-DebugWindows 是一款实用的 VSCode 调试辅助工具，它通过智能解析和表格展示，让调试过程变得更加高效和直观。无论你是 C# 开发者还是 JavaScript/TypeScript 开发者，都能从中受益。

主要优势

✅ 直观展示 - 表格形式展示复杂数据
✅ 功能强大 - 支持分页、筛选、导出
✅ 智能解析 - 自动识别数据类型并选择解析器
✅ 易于扩展 - 模块化设计，方便添加新功能
✅ 开源免费 - MIT 许可证，可自由使用和修改

如果你觉得这个插件有用，欢迎：

• ⭐ 给项目点个 Star
• 🐛 提交 Issue 反馈问题
• 💡 提出功能建议
• 🔧 贡献代码

VsCode插件开发

项目地址：https://gitee.com/odinsam/debug-window

---

本文介绍了 odin-DebugWindows 插件的功能和使用方法。如果你在开发过程中也遇到了类似的调试困扰，不妨试试这个插件，相信它会让你事半功倍！