网页浏览器控制工具：让 AI 直接接管真实 Chrome，点击、填表、截图一步到位
先用几句话把结论摆出来，方便你判断这个技能值不值得装：
- 它是什么：一个基于 Chrome DevTools Protocol（CDP）的轻量网页控制技能，让 Claude 能够真实地打开网页、点击按钮、填写表单、执行 JavaScript、截图取证。
- 它解决什么：AI 只能"读文本"却"碰不到页面"的痛点——动态渲染的页面、需要登录的站点、必须点击才出现的弹窗，都能通过它处理。
- 怎么用：通过在终端调用一组
./scripts/*.js脚本完成操作，命令短、语义直白，几乎不需要写框架代码。 - 适合谁：前端联调、测试验证、竞品调研、表单批量填写、页面内容核查等需要"真浏览器"的场景。
- 成本与门槛：本机需装好 Node.js 与 Google Chrome/Chromium，无需复杂配置，但首次需要熟悉几个核心脚本。
该技能叫什么？如何一键安装 AI 技能提升开发效率？
基本信息
| 项目 | 内容 |
|---|---|
| 技能中文名 | 网页浏览器控制工具Skill |
| 技能英文名 | web-browser |
| 技能ID | 13665 |
| 技术底座 | Chrome DevTools Protocol（CDP），远程控制 Google Chrome / Chromium |
| 默认调试端口 | 9222 |
| 日志目录 | ~/.cache/agent-web/logs/YYYY-MM-DD/<targetId>.jsonl |
它到底解决什么问题
传统的大模型在"网页"这件事上是跛脚的：它能读懂你复制粘贴过去的 HTML，但打不开页面、点不了按钮、拿不到登录后的内容、更没法确认自己刚才的操作有没有生效。而很多真实任务恰恰卡在这些动作上——比如"帮我把这个后台表单填完"“看看这个按钮点下去会不会报错”“把这页所有站内链接列出来”。
web-browser 技能就是把"浏览器的手"接给了 AI：它通过 CDP 协议在 9222 端口上启动并接管一个真实的 Chrome 实例，AI 需要浏览网页时，就调用这个技能提供的脚本去操作，操作结果再回到对话里，形成"看到 → 操作 → 验证"的闭环。
一键安装的思路与步骤
这里的关键认知是：这类技能的价值不在于"装上"，而在于"装上之后 AI 就能自己跑流程"。下面是与技能详情一致的操作路径（具体安装入口、技能包获取方式与目录规范以官方说明为准）。
第一步：准备运行环境
- 本机安装 Node.js（脚本均为
.js文件，需要 Node 运行环境）。 - 本机安装 Google Chrome 或 Chromium，脚本会用它作为被控浏览器。
- 确认终端可以直接执行技能目录下的
./scripts/脚本。
第二步：把技能接入 Claude
- 将 web-browser 技能包放入你的 AI 客户端所使用的技能目录中（目录位置、命名规范以官方说明为准）。
- 接入完成后，Claude 在判断"需要浏览网页"时即可调用该技能。
第三步：启动受控浏览器
./scripts/start.js # 使用全新配置文件
./scripts/start.js --profile # 复制你自己的配置文件（含 cookies、登录信息）
前者适合干净环境下的公开页面访问；后者适合需要登录态的场景——比如要操作内部后台，就用 --profile 把你的浏览器配置复制过去，避免反复登录。
第四步：验证是否生效 启动后用最简单的命令探一下当前标签页标题：
./scripts/nav.js https://example.com
./scripts/eval.js 'document.title'
如果第二条命令返回了页面的标题字符串，说明"启动 → 导航 → 执行脚本"这条链路已经打通，技能可正常使用。
第五步（可选）：确认日志通道
start.js 会自动启动后台日志记录，把控制台输出、页面错误和网络请求写入 JSONL 文件。可用下面的命令确认：
./scripts/logs-tail.js
能看到日志内容，就说明监控链路也是通的。
该技能的主要功能和特点
能做什么
- 启动与接管浏览器：
start.js在9222端口上以远程调试模式拉起 Chrome，并可选地复制你的浏览器配置（携带 cookies 与登录信息）。 - 页面导航：
nav.js可以导航当前标签页，加--new则在新标签页中打开，方便保留原页面做对比。 - 执行任意 JavaScript：
eval.js在活动标签页的异步上下文中执行 JS 表达式，返回值直接反馈给 AI。这相当于把"读取页面数据"的能力完全打开了。 - 视口截图：
screenshot.js截取当前视口并返回临时文件路径，便于人工确认渲染效果或留证。 - 交互式元素选择：
pick.js提供一个可点击的选择器，点击选中、Cmd/Ctrl + 点击多选、回车完成——非常适合"我就是要那个按钮"这种难以用选择器精确描述的场景。 - 自动关闭 Cookie 弹窗：
dismiss-cookies.js针对欧盟 cookie 同意对话框，默认接受，加--reject则尽可能拒绝。 - 后台日志记录：自动记录控制台输出、页面错误与网络请求，
watch.js可手动启动，logs-tail.js支持--follow持续跟随，net-summary.js汇总网络响应。
和普通工具比强在哪
- 零框架依赖：不需要写 Playwright/Puppeteer 那样的测试工程，一个 bash 命令就是一次操作，天然适合被 AI 逐条调用。
- 命令行即接口：每个能力都是一个短脚本，AI 生成和纠错的成本极低，出错时也容易定位是哪一个动作失败。
- 自带"验证层"：
eval.js+screenshot.js+ 日志三者组合，让 AI 不只是"发出操作"，还能"确认结果"，这是纯文本工具完全做不到的。 - 面向协作探索：
pick.js的设计思路是"人机协作选择元素"，而不是让 AI 去猜 CSS 选择器，降低了误点风险。
如何使用该技能？
下面按典型工作流给出分步骤指南。所有命令均以技能目录为当前工作目录执行。
步骤 1：启动浏览器
./scripts/start.js --profile
需要登录态时加 --profile；只是抓公开页面则用 ./scripts/start.js。
步骤 2：打开目标页面并顺手清掉 Cookie 弹窗
./scripts/nav.js https://example.com && ./scripts/dismiss-cookies.js
技能文档中明确给出的组合用法，建议养成习惯：先导航，再清弹窗，避免后续点击被遮罩层挡住。若希望保留当前页面另开一页做对比：
./scripts/nav.js https://example.com --new
步骤 3：读取页面信息（输入 → 输出）
- 输入：
./scripts/eval.js 'document.title' - 输出：当前标签页的标题字符串，例如
Example Domain。
再看一个更实用的例子，列出所有站内链接（过滤掉外链）：
./scripts/eval.js 'JSON.stringify(Array.from(document.querySelectorAll("a")).map(a => ({ text: a.textContent.trim(), href: a.href })).filter(link => !link.href.startsWith("https://")))'
- 输出：一个 JSON 数组，每项含
text与href。 - 注意转义：技能文档特别提醒——字符串转义容易出错，优先使用单引号包裹整段 JS。
步骤 4：需要精确定位元素时，改用可视化选择
./scripts/pick.js "点击提交按钮"
在弹出的页面中手动点击目标元素（多选用 Cmd/Ctrl + 点击，回车结束），得到选择结果后再让 AI 继续操作。适用于元素动态生成、选择器不可预测的页面。
步骤 5：截图留证
./scripts/screenshot.js
输出：当前视口的截图临时文件路径。适合在关键操作前后各截一张，做"操作前 / 操作后"对比。
步骤 6：排查问题——看日志
./scripts/logs-tail.js --follow
./scripts/net-summary.js
前者实时跟随日志，能看到控制台输出与页面错误；后者汇总网络响应，接口状态码、慢请求一目了然。当日志文件按 ~/.cache/agent-web/logs/YYYY-MM-DD/<targetId>.jsonl 分目录存放时，可以按日期与标签页回查历史。
小提示：整个流程是"导航 → 观察 → 操作 → 再观察"，不要一次性发出一长串操作，每一步都用
eval.js或截图确认，成功率会明显更高。
同类型竞品对比分析
| 方案名称 | 定位 | 核心功能 | 安装/使用门槛 | 适用场景 | 优势与不足 |
|---|---|---|---|---|---|
| web-browser（本技能） | 轻量 CDP 命令行工具，面向 AI 协作探索 | 启动浏览器、导航、执行 JS、截图、元素选择、Cookie 清理、日志与网络汇总 | 需 Node.js + Chrome，调用脚本即可，无框架工程 | AI 驱动的页面探索、临时验证、登录态页面操作 | 优势：命令极简、AI 友好、自带日志与截图验证；不足：非完整自动化框架，缺少断言、夹具、并发编排等测试能力 |
| Playwright | 成熟浏览器自动化与端到端测试框架 | 多浏览器驱动、选择器引擎、断言、录制、并行执行 | 需建工程、写代码、学习 API，较重 | 大型回归测试、持续集成 | 优势：生态完善、能力全面；不足：对"临时看一眼页面"这类任务过重，AI 需要生成大量代码 |
| Puppeteer | Node 生态的 Chrome 控制库 | 页面控制、截图、PDF、网络拦截 | 需编写脚本 | 爬虫、页面渲染、批量截图 | 优势：与 Chrome 贴合度高；不足：偏向代码工程，缺少交互式选元素等协作能力 |
| 纯文本抓取工具（如 HTML 转 Markdown 类工具） | 抓取静态页面内容 | 抓取 HTML 并转为可读文本 | 极低，一条命令即可 | 阅读文章、提取正文 | 优势：轻、快、零门槛；不足：无法处理登录态、动态渲染、点击交互，也无法验证操作结果 |
怎么选：只想"读内容"，纯文本抓取工具最省事；要做成体系的自动化测试，用 Playwright；而"让 AI 临时接管一个真实浏览器、边看边点边验证"这一档需求，恰好是 web-browser 技能的甜点区。
该技能的典型应用场景与实际体验情况
场景一：前端/测试工程师的快速联调
- 角色与痛点：改完一个按钮的逻辑，不想每次都开 DevTools 手动点一遍。
- 使用方式：
start.js --profile带上登录态 →nav.js打开目标页 →dismiss-cookies.js清弹窗 →pick.js "点击提交按钮"选中按钮 →eval.js读取页面状态确认结果。 - 实际体验：上手极快，命令语义一看就懂；
pick.js解决了很多"选择器写不对"的尴尬。注意：操作前后最好配合screenshot.js截图，避免"以为点到了其实被遮罩挡住"。
场景二：产品/运营的竞品页面信息盘点
- 角色与痛点：需要把一个站点里所有站内链接、入口文案整理成表格，纯手工复制要半小时。
- 使用方式：
nav.js打开站点，然后用eval.js执行带过滤逻辑的 JS，直接拿到text与href的 JSON 数组。 - 实际体验：一条命令产出结构化数据，效率提升非常直观。注意事项：复杂 JS 一定要用单引号包裹，双引号嵌套容易转义失败；页面若为懒加载，需要先滚动再取值。
场景三：需要登录态的后台操作
- 角色与痛点：内部系统必须登录才能访问，匿名抓取一律拿不到数据。
- 使用方式：用
start.js --profile复制本机浏览器配置（含 cookies、登录信息），再执行导航与读取。 - 实际体验：这是本技能最实用的能力之一，免去反复登录。注意事项：涉及账号与隐私数据时，务必确认操作范围与合规要求；日志会记录网络请求，敏感环境下需评估日志留存的必要性。
场景四：页面异常排查（控制台报错 + 接口失败）
- 角色与痛点：某个页面白屏或按钮无响应，光看代码猜不出原因。
- 使用方式：
logs-tail.js --follow实时观察控制台输出与页面错误，再用net-summary.js汇总网络响应，定位是 JS 报错还是接口 4xx/5xx。 - 实际体验：把"打开 F12 逐个面板看"的动作压缩成了两条命令。注意事项：日志按日期与 targetId 分文件存放，排查历史问题时记得先确认日期目录。
总体上手评价：难度低，学习成本集中在"记住 7 个脚本的用途"上；效果好坏取决于提问是否具体，以及是否养成了"每步验证"的习惯。
该技能能为用户带来的价值
效率层面：把"打开浏览器 → 手动点击 → 复制数据 → 判断结果"这类重复劳动压缩成一串命令。对于"整理某页面全部内链"这种原本需要十几分钟的任务，转化成一条 eval.js 命令，差距是数量级的。
能力层面：它补上了 AI 工具的"最后一公里"——从只能读文本，变成能操作真实浏览器。这意味着登录后的页面、需要点击展开的内容、依赖 JS 渲染的数据，AI 都能触及，任务的可行边界被显著拓宽。
降低门槛层面：传统浏览器自动化要先搭工程、写代码、学 API，而这里只需要在终端里敲命令；pick.js 更是把"写对选择器"这个最容易卡住新人的环节，变成了"点一下就行"。
长期价值：一是过程可追溯——控制台、错误、网络三类日志落盘为 JSONL，出问题能回查；二是可组合——导航、执行、截图、清弹窗这些原子能力可以被自由拼装成流程，随着使用深入，能沉淀出属于自己团队的浏览器操作套路。
常见问题 FAQ
Q1：这个技能怎么安装？需要提前准备什么？
需要在技能目录中接入 web-browser 技能包（具体目录规范与接入入口以官方说明为准），并确保本机已安装 Node.js 与 Google Chrome / Chromium。装好后执行 ./scripts/start.js 启动受控浏览器，再用 ./scripts/eval.js 'document.title' 验证链路是否打通。
Q2：使用这个技能收费吗？ 技能本身是一组脚本，运行在你的本地环境，不产生订阅费用。但你操作的目标网站、以及你所使用的 AI 客户端本身的计费规则，请以各自官方说明为准。
Q3：它适合谁用？不适合谁？ 适合前端/测试工程师做联调验证、产品运营做页面信息盘点、以及任何需要 AI "真的去点一下"的场景。如果你只是想把一篇文章的正文抓下来读，用更轻的纯文本抓取工具就够了；如果你要构建带断言、可并行、进 CI 的完整测试体系，建议选择 Playwright 这类成熟框架。
Q4：和 Playwright、Puppeteer 怎么选？ 看任务体量。一次性、临时性、需要人机协作判断的任务，用 web-browser 技能更省事；长期维护、需要大量断言与并行执行的自动化工程，用 Playwright。两者并不冲突，日常可以用本技能做探索，验证清楚后再用框架固化。
Q5：为什么我的 eval.js 命令一直报错？
最常见的原因是字符串转义。技能文档已经提示：整段 JavaScript 建议用单引号包裹，内部的字符串用双引号，避免多层引号嵌套。另外请确认浏览器已通过 start.js 正常启动、当前标签页确实已经导航到目标页面。
Q6：操作后怎么确认真的生效了？
建立"三步确认"习惯：先用 eval.js 读取关键状态（如元素数量、文本内容、document.title），再用 screenshot.js 截图肉眼确认，最后用 logs-tail.js 或 net-summary.js 检查有无报错或接口异常。三者都通过，才算操作成功。