vite-browser不只定位哪里坏了，还要搞清楚为什么坏了。

Vite 应用的运行时诊断工具。连接正在运行的 dev server，从终端查询 HMR 追踪、错误关联、组件状态 —— 开发者和 AI 编码助手都能直接用。

快速开始

为什么用 Agent Skills？

GitHub

零配置接入

对着任何正在运行的 Vite dev server 直接工作。不装插件、不改配置、不侵入项目。Vue、React、Svelte 开箱即用。

技能路由调试

作为 Agent Skill 安装后，AI 编码工具会自动选择正确的调试工作流 —— HMR 排查、网络回归还是发布前检查。

从「页面坏了」到「原因在这」

将当前错误和最近的 HMR 更新关联起来，追踪 store → render → error 传播路径，用结构化证据取代猜测。

调试的痛点

你保存了一个文件，Vite 热更新，页面坏了。错误覆盖层告诉你什么出错了 —— 但没说哪次更新导致了它，变化是怎么沿组件树传播的，真正的根因到底是过期的 store、一个坏掉的 import，还是接口回归。 vite-browser 就是来补上这个缺口的。

零插件连接任何正在运行的 Vite dev server，即装即用。

Agent 原生每条命令返回结构化输出，AI 编码工具可以直接推理使用。

技能路由根据当前症状自动选择正确的调试工作流。

追踪热更新故障

将当前错误和最近的热模块更新关联起来。获取基于规则的诊断结果（如 missing-module 或 hmr-websocket-closed），快速缩小问题范围。

检查框架状态

查询 Vue 组件树、Pinia 状态、React props 和 hooks、Svelte 状态 —— 同时查看控制台日志、网络请求和源码映射后的错误 —— 全在一个终端里完成。

诊断传播路径

当一个 store 更新导致下游组件崩溃时，追踪 store → render → error 路径，用高置信度证据取代手动逐步检查 DevTools。

一个典型的调试过程

vite-browser open http://localhost:5173
vite-browser errors --mapped --inline-source
vite-browser correlate errors --mapped --window 5000
vite-browser diagnose propagation --window 5000