next-browser
为AI Agent提供可解析的浏览器调试与交互能力
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：next-browser。 它的用途是：为AI Agent提供可解析的浏览器调试与交互能力 完整的 Skill 内容见：https://321skill.com/skills/next-browser/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请检查当前页面的React组件树，并找出所有产生错误的组件。” 它会先运行 `next-browser open <当前URL>` 打开页面，然后执行 `next-browser tree` 获取完整组件结构，再运行 `next-browser errors` 列出错误信息，最后将错误与组件树节点进行关联分析并报告给你。
介绍
next-browser 是一个专为AI Agent设计的浏览器调试与交互工具。它解决的核心问题是：传统浏览器开发工具（DevTools）的图形界面和复杂交互对于AI Agent来说难以直接理解和操作，导致AI无法像人类开发者一样进行网页调试、组件检查和自动化测试。
该工具通过将React DevTools和Next.js开发覆盖层的核心功能封装成一系列结构化的命令行指令来实现。AI Agent只需运行如 next-browser tree、next-browser click e3 这样的命令，就能以纯文本形式获取组件树、属性、错误、网络请求等关键信息，并执行点击、填充等交互操作，从而实现对网页的自动化探索与调试。
它非常适合需要自动化网页测试、UI状态监控、无障碍（a11y）审计或进行端到端（E2E）交互模拟的AI Agent开发者、自动化测试工程师以及研究智能体交互能力的研究人员。其核心设计理念是让AI能够“阅读”和“操作”网页，而非依赖视觉或复杂的API调用。
与同类工具（如Puppeteer、Playwright的常规API）相比，next-browser 的最大区别在于其输出是高度结构化、易于LLM解析的文本，并且命令设计为无状态、一次性执行的模式，与一个长期运行的浏览器守护进程通信。这使得AI Agent可以在一个循环中轻松发起和解析命令，而无需管理复杂的浏览器生命周期和上下文，极大简化了Agent的编程模型。
核心特点
核心区别在于其输出专为AI解析设计（如为可交互元素标记 `[ref=eN]`），且采用无状态命令与长连接守护进程的架构，让AI Agent能像操作命令行一样直接“阅读”和“操作”网页的React组件树、网络状态等内部信息，而不仅仅是模拟用户点击。
注意事项
不适合需要直接操作非Next.js/React框架构建的网页，或依赖浏览器原生DevTools图形界面进行复杂视觉调试的场景。
常见问题
next-browser 和 Playwright 有什么区别？
Playwright 是通用的浏览器自动化库，而 next-browser 在其之上，专门输出供AI解析的Next.js/React应用内部状态（如组件树、Hook），命令更贴近调试视角。
AI Agent 如何通过它点击一个按钮？
AI 先运行 `next-browser snapshot` 获取带 `[ref=eN]` 标记的无障碍快照，找到目标元素引用，然后执行 `next-browser click e3` 即可。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/next-browser/raw/index.md 读取 next-browser 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/next-browser/raw/index.md（查看排版版本）