企业官网建设流程全解析

深入Chrome DevTools Protocol：pi-skills如何连接9222端口并远程控制Chrome

【免费下载链接】pi-skillsSkills for pi coding agent (compatible with Claude Code and Codex CLI)项目地址: https://gitcode.com/gh_mirrors/pi/pi-skills

pi-skills是一个面向 AI 编程代理（pi-coding-agent，兼容 Claude Code 与 Codex CLI）的技能集合，其中 browser-tools 技能借助Chrome DevTools Protocol（CDP），通过9222 远程调试端口连接你本机的 Chrome 浏览器，实现网页导航、JavaScript 执行、截图、元素拾取、Cookie 调试等远程控制 Chrome的完整能力。本文带你从零理解这条链路的工作原理。

什么是 Chrome DevTools Protocol

Chrome DevTools Protocol 是 Chromium 浏览器内置的一套远程调试接口：当 Chrome 以调试模式启动时，会在本机开放一个 HTTP 端口（默认约定为9222），外部程序通过该端口发送 JSON 指令，即可控制浏览器完成打开网页、执行脚本、抓取 DOM、读取 Cookie 等操作。

浏览器自动化工具（如 Puppeteer）本质上就是 CDP 的客户端封装。pi-skills 正是基于这一机制，让 AI 代理"像人一样"操控真实浏览器。

pi-skills 如何启动并连接 9222 端口

连接流程由 browser-tools/browser-start.js 完成，核心分三步：

1. 先探测端口：脚本先用puppeteer.connect({ browserURL: "http://localhost:9222" })尝试连接，若已有 Chrome 在监听 9222，直接退出，避免重复启动。
2. 带调试参数启动 Chrome：通过--remote-debugging-port=9222参数拉起新的 Chrome 实例，并指定独立的--user-data-dir（缓存在~/.cache/browser-tools），同时清理 SingletonLock 等锁文件以强制新实例（见 browser-start.js#L54-L63）。
3. 轮询等待就绪：启动后以 500ms 间隔、最多 30 次尝试重连，直到 CDP 通道建立（见 browser-start.js#L66-L84）。

💡 小技巧：加上--profile参数，脚本会用 rsync 同步你默认 Chrome 的用户数据（Cookie、登录态），这样 AI 控制浏览器时也能"记住"你的登录状态。

六大命令行工具：远程操控 Chrome 的原子能力

pi-skills 把 CDP 能力拆成一组单职责的 CLI 脚本，每个脚本都通过puppeteer.connect连上 9222 端口、操作"最后一个活动标签页"，用完即断开，结构统一、极易理解：

以执行 JavaScript 为例，browser-eval.js 通过(await b.pages()).at(-1)取得活动标签页，再用page.evaluate在页面上下文中求值——这一招让 AI 能一次性读取页面状态、批量点击、模拟输入，而无需反复截图"看"页面。

browser-tools/SKILL.md 中还附了一份"效率指南"：优先解析 DOM 而非截图、用 IIFE 打包多语句脚本、批量处理点击等，帮助代理高效使用这些工具。

典型使用场景

• 🖱️前端联调：AI 在真实浏览器中测试代码，交互后截图验证 UI 变化
• 🔐会话调试：用 Cookie 工具快速定位"为什么登录失效"
• 📰动态内容抓取：对 JS 渲染的页面提取正文（browser-content.js 会等待networkidle2再取 DOM，并带 30 秒全局超时保护）
• 🎯人机协作：页面结构复杂时，用元素拾取让用户直接点选目标元素，AI 拿到选择器后精准操作
• 🧪动态数据抓取：配合 cheerio 解析 JS 渲染后的 HTML，如 browser-hn-scraper.js 演示的抓取流程

快速上手

环境要求：Chrome + Node.js，并在技能目录安装依赖（browser-tools/package.json 使用puppeteer-core，不会重复下载浏览器）：

cd browser-tools npm install ./browser-start.js # 全新 profile 启动 Chrome ./browser-start.js --profile # 同步你的登录态 ./browser-nav.js https://example.com ./browser-eval.js 'document.title'

连接失败时，所有脚本都会给出明确提示——先运行browser-start.js即可。

安全须知

CDP 调试端口意味着"任何能访问该端口的人都能完全控制浏览器"。pi-skills 将其绑定在localhost:9222，仅本机可连，且使用独立的--user-data-dir，与你日常使用的浏览器隔离。建议：用完及时关闭调试实例，不要为图省事复用主 profile（--profile是复制而非共用），并只在可信网络环境启用。

小结

pi-skills 用一套极简的 CDP 客户端脚本，把"AI 远程控制 Chrome"拆成了可组合的原子操作：9222 端口是桥梁，puppeteer.connect 是握手，六个单职责脚本是手脚。理解这条链路后，你既可以让代理全自动操作网页，也可以在需要时通过元素拾取介入协作——这正是 browser-tools 技能设计的精髓。

【免费下载链接】pi-skillsSkills for pi coding agent (compatible with Claude Code and Codex CLI)项目地址: https://gitcode.com/gh_mirrors/pi/pi-skills