AI实用工具:DebugMCP给Agent装上调试器,PackagePal悬停显示跨语言等价包

2026年6月16日

今天三个工具分别切入 AI 编码的三个关键盲区：让 Agent 获得运行时调试能力、帮开发者在语言迁移时不再瞎猜等价包、以及用 AI 自动生成 Storybook 故事。三个都今天就能装进你的编辑器。

DebugMCP — 给 AI Agent 装上调试器：设断点、单步执行、看变量，不用再靠猜

用 AI Agent 写代码的人迟早撞上同一个墙：Agent 生成了代码，跑挂了，然后它就靠读源码和错误日志来猜问题在哪。人类开发者不会这么 debug——我们会设断点、单步执行、看变量值、评估表达式。DebugMCP 做的事很直接：在 VS Code 里跑一个 MCP Server，把 VS Code Debugger 的全部能力暴露给 AI Agent，让 Agent 像人一样调试代码。

原理不复杂但设计很工整。DebugMCP 作为 VS Code 扩展安装后自动在后台启动 MCP Server，AI Agent 通过 MCP 协议调用 10 个调试工具：start_debugging 启动调试会话、set_breakpoint 设断点、step_over/step_into/step_out 控制执行流、get_variables 查看变量值、evaluate_expression 在断点处评估表达式、get_stack_trace 获取调用栈。Agent 不再靠 grep 日志猜 bug，而是像人类一样"跑一下看看变量到底是多少"。

它还自带一个 /debug 配套 Skill，装完扩展后自动注入到 AI 助手的 skills 目录。触发 /debug 后 Agent 会加载系统化的调试工作流指令，知道什么时候该设断点、什么时候该单步、什么时候该检查变量。支持所有 MCP 兼容的 AI 助手——GitHub Copilot、Cursor、Codex、Windsurf、Cline、Roo Code、Antigravity——自动检测已安装的助手并弹窗提示一键注册，不需要你手写配置。

适用场景很明确：Agent 生成的代码跑挂了（测试失败、运行时异常、逻辑不符合预期），你不用亲自接手调试，Agent 自己跑 DebugMCP 工具定位问题。对后端开发（复杂业务逻辑、异步调用链）和前端开发（组件状态异常、事件流问题）同样有效。支持 VS Code 支持的所有语言，因为底层直接对接 VS Code Debugger 协议。

# 1. 从 VS Code Marketplace 安装
# 搜索 "DebugMCP" 或直接访问:
# https://marketplace.visualstudio.com/items?itemName=ozzafar.debugmcpextension

# 2. 安装后扩展自动启动 MCP Server，弹窗提示一键注册到你的 AI 助手

# 3. 在 AI 助手中输入 /debug 激活调试工作流

PackagePal — 悬停一下，Node.js 包在 Go/Rust/Python 里的等价物直接显示

多语言迁移的痛点很具体：你熟悉 Express.js 想用 Go 重写一个服务，或者从 Python 切到 Rust——你知道在源语言里该用什么包，但目标语言里的等价物是什么？每一个决定都要打开浏览器、搜"X in Go equivalent"、对比两三个候选、读文档、判断是不是还在维护。PackagePal 把这个流程压缩到一个悬停动作。

在 VS Code 里安装 PackagePal 后，鼠标悬停在任何 import 语句上，立刻弹出目标语言中 Top 3 最匹配的等价包——包含包名、描述、可直接粘贴的代码片段和官方文档链接。不是静态查找表，底层调用 Gemini AI 理解源包的功能语义和生态惯例，然后匹配目标语言中真正活跃维护的等价物。只有包名被发送到 API，源代码不出机器。

侧边栏还有一个 Explorer 面板（点击 🚀 图标），自动扫描当前文件里所有 import，以树状视图列出每个包及其等价物，支持展开查看代码片段和文档。支持 12 种语言之间的交叉查询：JavaScript、TypeScript、Python、Go、Rust、Java、Kotlin、C#、C++、Ruby、PHP、Swift。状态栏一键切换目标语言。

BYOK 模式：去 Google AI Studio 免费拿一个 Gemini API Key（30 秒），密钥存在 VS Code 原生 Secret Storage 中。零月费，只付 Gemini API 调用费用（通常几分钱一天）。

# 1. 从 VS Code Marketplace 安装 "PackagePal"
# 2. Ctrl+Shift+P → "Set Gemini API Key"（去 aistudio.google.com 免费获取）
# 3. 在状态栏选择目标语言
# 4. 悬停任意 import 语句查看等价包

Story UI — 用自然语言描述，AI 自动生成 Storybook 故事

写 Storybook 故事是个高投入低反馈的活：每个组件变体都要手写一个 story，prop 组合、状态变化、边界情况——组件本身可能 50 行，story 文件轻松 200 行。Story UI 的定位很精准：你说"给我写一个 Button 组件的 story，覆盖 primary/secondary/disabled 三种状态和点击事件"，AI 读你项目的设计系统代码，输出可运行的 Storybook 故事代码。

核心机制：Story UI 先读取你的组件源码和你指定的设计系统（Mantine、Chakra UI、Material UI、Vuetify、Angular Material、shadcn/ui 或自定义），然后根据自然语言描述生成 story 代码。生成的代码经过 TypeScript AST 解析验证——语法不对自动进入 LLM 修复循环，直到通过。结果不是模板代码，是用你项目实际组件的 import 写出来的。

关键差异点：不锁定框架和设计系统。React（Mantine/Chakra/MUI/shadcn）、Vue（Vuetify）、Angular（Angular Material）、Svelte（Flowbite-Svelte）、Web Components（Shoelace）全部支持，还可以接入你自己的组件库。多 AI 提供商：Claude（推荐）、OpenAI、Gemini，自动模型选择。还有一个 Voice Canvas 功能——直接口述组件想法，实时渲染到 Storybook。

188 stars、90 个版本迭代、v4.16.12 说明这不是一个周末项目。项目方的设计是"零锁定"——你可以用 Mantine 今天，换 shadcn/ui 明天，Story UI 适配你的选择而不是反过来。

# 安装
npm install --save-dev story-ui

# 初始化配置
npx story-ui init

# 选择框架、设计系统、AI 提供商后自动生成 story-ui.config.js
# 在 Storybook 中运行即可

AI实用工具:DebugMCP给Agent装上调试器,PackagePal悬停显示跨语言等价包

DebugMCP — 给 AI Agent 装上调试器：设断点、单步执行、看变量，不用再靠猜

同类工具对比

PackagePal — 悬停一下，Node.js 包在 Go/Rust/Python 里的等价物直接显示

同类工具对比

Story UI — 用自然语言描述，AI 自动生成 Storybook 故事

同类工具对比