chrome-cdp-skill

核心用法

chrome-cdp 是一个面向本地 Chrome 系浏览器的 CLI 调试工具，通过 Chrome DevTools Protocol (CDP) 直接建立 WebSocket 连接。用户需先在浏览器中启用远程调试（chrome://inspect/#remote-debugging），即可使用一系列命令与已打开的页面交互。

主要功能包括：

• list：列出所有打开的标签页及其 targetId
• shot：截取视口截图（注意仅捕获可见区域，需滚动后截图获取完整内容）
• snap：获取页面的可访问性树快照
• eval：在页面上下文中执行 JavaScript
• html：获取完整页面或指定元素的 HTML
• nav：导航到新 URL 并等待加载完成
• net：获取资源加载时间线
• click/clickxy：通过 CSS 选择器或坐标点击元素
• type：在当前聚焦元素输入文本（支持跨域 iframe，优于 eval 方案）
• loadall：自动点击"加载更多"直至消失
• evalraw：直接透传原始 CDP 命令
• open/stop：打开新标签或停止后台守护进程

显著优点

1. 轻量无依赖：直接使用 Node.js 内置 WebSocket，无需 Puppeteer 等重型库
2. 大标签页友好：相比 Puppeteer，在高标签页数场景下表现更稳定
3. 原生协议支持：直接操作 CDP，功能覆盖截图、DOM 操作、网络监控等核心调试需求
4. 跨域 iframe 支持：type 命令可安全处理跨域 iframe 中的文本输入

潜在缺点与局限性

1. 仅限本地使用：必须配合用户本地已开启远程调试的浏览器，无法云端部署
2. 手动授权流程：首次访问每个标签页时 Chrome 会弹出"Allow debugging"确认框
3. 截图范围限制：shot 仅捕获当前视口，需手动滚动后多次截图获取完整页面
4. 坐标系统复杂：截图使用物理像素（CSS pixels × DPR），而 CDP 输入事件使用 CSS 像素，需手动换算
5. targetId 管理：依赖用户手动从 list 输出中复制前缀，且 CLI 拒绝模糊匹配
6. DOM 稳定性风险：多次 eval 调用间若页面变化（如点击后卡片索引位移），基于索引的选择器会失效

适合人群

• 需要调试本地浏览器中已打开页面的开发者
• 希望避免 Puppeteer 资源开销的自动化测试人员
• 需要快速截图、检查 DOM 结构或执行简单页面操作的技术用户
• 熟悉 Chrome DevTools Protocol 的高级用户

常规风险

• 会话超时：后台守护进程 20 分钟无活动后自动退出
• 权限提示依赖：若用户误拒授权，需重新打开标签页
• 非标准端口配置：需手动设置 CDP_PORT_FILE 环境变量适配自定义浏览器配置
• eval 安全性：eval 命令直接执行用户提供的 JavaScript，需警惕注入风险