用途：该技能教 AI 智能体如何结合 WebMCP 与 Chrome DevTools MCP 进行结构化、token 高效的浏览器自动化。它不用截图式工作流，而是把网站 JavaScript 函数注册为 AI 可调用工具，资料称可减少最多 89% 的 token 消耗。
主要能力：Chrome DevTools MCP 服务器通过 CDP 连接 Chrome，提供 26 个浏览器自动化工具（导航、交互、检查、标签页管理）、WebMCP 工具发现（list_webmcp_tools）与执行（call_webmcp_tool）。架构为：AI 客户端 → Chrome DevTools MCP → Chrome（CDP）→ 网站（navigator.modelContext）。
使用方式：克隆并运行演示：git clone https://github.com/WebMCP-org/chrome-devtools-quickstart.git，cd chrome-devtools-quickstart，npm install，npm run dev（打开 http://localhost:5173）。在 AI 客户端添加 MCP 服务器，如 Claude Code：claude mcp add chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest 与 claude mcp add --transport http webmcp-docs https://docs.mcp-b.ai/mcp；Cursor、Claude Desktop、Windsurf 使用对应 mcpServers 配置。自有项目安装：npm install @mcp-b/global，并须最先 import '@mcp-b/global'，之后可用 navigator.modelContext.registerTool 注册工具，支持无参数、带参数、复杂 inputSchema 与错误处理。
适用场景：网页自动化、表单交互、状态管理与 DOM 操作等 AI 驱动任务，并可用 npm run benchmark:simple:direct 等命令对比 token 用量。
限制：资料未提供收费、价格与平台支持范围；需注意 @mcp-b/global 必须最先导入、工具需在页面加载后注册、Chrome 需以远程调试端口 9222 启动，Vite HMR 可能需强制整页刷新。