大家好，我是 xy。
Anthony Fu 最近又发了一个新框架：Devframe v1.0。
这次做的东西很特别，它不是新的 Web 框架，也不是 UI 库，而是专门用来开发 DevTools 的。
这些年 Anthony Fu 团队做过 UnoCSS Inspector、Vite Plugin Inspect、Nuxt DevTools、ESLint Config Inspector、Node Modules Inspector 等大量工具。
但工具做得越多，重复工作也越明显：RPC、状态同步、序列化、静态资源、Web UI、开发服务器接入，每个项目都得重新搞一遍。
Anthony Fu 从 2023 年就在构想一套 Universal DevTools Ecosystem。
现在，这套东西终于落到了 Devframe 上。
什么是 Devframe？
Devframe 就是一个专门开发 DevTools 的框架。
如果 Nuxt、Next.js 是用来开发 Web 应用的，那么 Devframe 就负责开发数据检查器、Bundle 分析器、Terminal、Inspector 这些工具。
一个 Devframe 可以定义自己的 RPC、共享状态、SPA、诊断能力以及 Coding Agent 接口。
真正关键的是，它初始化之后会统一生成一个标准的：Request → Response Handler。
这样 DevTool 就和具体开发服务器解耦了。
Hono、Nitro、Next.js、SvelteKit、Vite、Rsbuild 都可以用同一套能力接入。
如何快速使用
先安装：
pnpm add devframe
然后定义一个 DevTool：
import { defineDevframe } from 'devframe'
export default defineDevframe({
id: 'my-tool',
name: 'My Tool',
setup(ctx) {
// 注册 RPC、状态等能力
},
})
再通过 initDevframe() 初始化，然后挂到你的项目里。
如果只是想先体验一下，官方的 Data Inspector 可以直接运行：
pnpx @devframes/plugin-data-inspector
整体思路非常简单：
先定义工具提供什么能力，再决定它最终跑在哪里。
最炸的能力：一次开发，到处运行
官方给 Devframe 总结了一句话：Define once, mount anywhere.
写一次，到处跑。
同一个 Devframe，不只能挂到 Vite、Next.js、SvelteKit、Hono、Nitro、Bun、Deno 等不同环境。
通过 Adapter，它还能直接变成：
CLI、独立 Dev Server、Vite DevTools 插件、MCP Server、静态报告。
比如开发一个 Bundle Inspector，CLI 可以用它，CI 可以生成静态报告，Vite DevTools 可以直接挂进去，AI Agent 也能通过 MCP 查询同一份数据。
目前 Node Modules Inspector、ESLint Config Inspector、Vite Plugin Inspect 已经在使用这套模式。
这有点像 unplugin。
unplugin 让一个插件跑多个构建工具。
Devframe 则想让一个 DevTool 跑遍不同框架和环境。
DevTools 正式杀进 AI Agent
Devframe 还有一个非常重要的设计：
for both humans and agents。
同一份 DevTools 能力，可以同时提供两套入口。
开发者通过图形界面查看数据，Codex、Claude Code 这类 Coding Agent 则可以直接读取里面的结构化信息。
比如 Build Graph，人可以看模块和 Chunk，Agent 可以直接查询慢模块，再结合整个代码仓库分析原因。
Devframe 为此提供了 MCP Adapter。
而且 RPC 默认不会直接暴露给 Agent，开发者需要明确指定哪些能力可以调用，同时还可以提供 Schema、描述和安全信息。它甚至接入了 Vercel 的 json-render，让 Agent 可以基于受限制的组件生成 Dashboard 和交互工具。
官方已经做出了一批 DevTools
Devframe 现在已经有不少实际案例。
Data Inspector 使用 Vue 开发，可以查看 Store、Cache、JSON、Framework Context、Build Metadata，甚至连接运行中的 Node.js 进程。
Terminals 使用 Svelte 开发，可以直接在浏览器里运行 Terminal 和交互式 PTY，甚至直接跑 Claude Code。
还有使用 Solid 开发的 Accessibility Inspector，基于 axe-core 检查 WCAG 问题，并且可以直接生成给 Coding Agent 使用的修复 Prompt。
除此之外还有 VS Code Web Editor、Assets、Git、Open Graph Preview、RPC Inspector。
这些工具分别使用 Vue、Svelte、Solid、React 等技术栈，也证明了一点：
Devframe 不绑定 UI 框架。
Devframe Hub
DevTools 多了以后，还有一个现实问题：入口太散。
UnoCSS 一个地址，Vite Inspect 一个地址，ESLint 又一个地址，页面上甚至还能挂几个悬浮按钮。
所以 Devframe 又提供了 Devframe Hub。
它可以把多个 Devframe 收到一个入口里，并共享 RPC Registry、State Store、Connection、Authentication，甚至统一的 MCP Endpoint。
而这套东西已经开始真正进入主流生态。
Vite DevTools 是第一个建立在这套基础设施上的旗舰 Host。
新的 Nuxt DevTools v4 直接构建在 Devframe + Vite DevTools 之上；Vue DevTools 也正在迁移到 Vite DevTools 基础设施。
甚至官方已经做出了 Next.js DevTools + Devframe Hub 的内部原型。
写在最后
现在再看 Devframe，它想做的已经很清楚了。
以前开发一个 DevTool，经常和某个框架、某个开发服务器绑在一起，相同能力在不同生态重复实现。
Devframe 想把这层公共能力抽出来：
一个工具定义，可以独立运行，可以进入 Vite DevTools，可以跑到不同框架，还可以通过 MCP 直接给 AI Agent 使用。
而且 Devframe v1.0 已经稳定核心接口，接下来还有 Vite DevTools 稳定版、Nuxt DevTools v4，以及 Vue DevTools 的继续迁移。
如果这套生态真的跑起来：
以后前端 DevTools，可能真要共用一套底层了。
相关链接： https://devfra.me官方文章： https://devfra.me/posts/pluggable-extensible-playful-devtools