用途：解决只在运行时才暴露根因的 UI/CSS/DOM 布局问题，如动态生成的 DOM、CSS 优先级冲突、布局计算异常。静态代码分析与 console.log 无法观察渲染后的 DOM 树、计算样式和盒模型几何，因此该技能提供场景到工具的决策表与各工具使用指南。
主要能力：按问题场景选择工具，覆盖 DOM 结构异常、CSS 未生效、布局偏移、交互无响应、登录墙/验证码、选择器脆弱页面、渲染性能、视觉回归、异步加载与网络问题、React/Vue 状态异常等。
使用方式：先检查 chrome-devtools-mcp 是否可用（Claude Code 运行 claude mcp list；OpenCode 查看配置；Cursor 在设置中查看 MCP 列表）。缺失时提供三种选择：自动安装（如 claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest）、手动安装或跳过改用手动 DevTools（F12）。环境需 Node.js LTS + npm 与 Chrome。默认通道为 ego-browser（仅 macOS，需运行时检查），不可用或失败时按链降级：非 macOS 用 playwright-mcp 再到 agent-browser；需要专用面板用 chrome-devtools-mcp；需要轻量登录态控制用 web-access CDP Proxy；无工具则引导手动 DevTools。降级时须告知用户当前通道，不得静默回退。
适用场景：浏览器可复现的 UI/CSS/DOM 问题、修复前后运行时状态对比验证、混合应用 WebView 调试、视觉回归对比。
限制：ego-browser 仅 macOS；框架 DevTools 为浏览器扩展，AI 无法直接操作，需用户手动检查；纯信息检索不属于本技能范围；性能追踪与无人值守 CI 回归可优先选用专用工具。具体安装命令与平台细节以资料为准，未提供的内容暂未说明。