pi-skills进阶教程browser-tools的eval、pick、cookies与截图四大工具高效使用技巧【免费下载链接】pi-skillsSkills for pi coding agent (compatible with Claude Code and Codex CLI)项目地址: https://gitcode.com/gh_mirrors/pi/pi-skillspi-skills 是面向 pi coding agent 的技能合集兼容 Claude Code 与 Codex CLI。其中的 browser-tools 是基于 Chrome DevTools ProtocolCDP的浏览器自动化工具让 AI 助手真正上手操作 Chrome 网页。本文将带你掌握 eval 执行 JS、pick 点选元素、cookies 检查登录态与 screenshot 页面截图四大工具的高效用法并附赠提升效率的进阶技巧。一、browser-tools 是什么browser-tools 不是无头headless爬虫而是连接到你真实可见的 Chrome 浏览器默认监听9222端口的远程调试模式。这意味着️ 你能亲眼看到 AI 在页面上做的每一步操作 可以携带你已登录的账号状态cookies 支持人机协作——比如用鼠标帮 AI 指认页面元素工具组成一览位于 browser-tools/ 目录脚本作用browser-eval.js在激活标签页执行任意 JavaScriptbrowser-pick.js交互式点选元素返回元素信息browser-cookies.js查看当前标签页的全部 cookiesbrowser-screenshot.js截取当前视口并返回图片路径browser-nav.js导航到指定 URL--new可开新标签页browser-start.js启动带远程调试的 Chrome完整说明见 browser-tools/SKILL.md。二、快速上手三步准备工作第 1 步安装依赖需要 Node.js 和 Chrome 浏览器。克隆仓库后进入技能目录执行依赖安装git clone https://gitcode.com/gh_mirrors/pi/pi-skills cd pi-skills/browser-tools npm install第 2 步启动调试版 Chromenode browser-start.js # 全新干净配置 node browser-start.js --profile # 复制你的日常配置保留 cookies 和登录态脚本会自动在9222端口开启远程调试若浏览器已在运行则直接提示跳过。需要登录的网站调试时务必加--profile否则会丢失登录态。第 3 步打开目标页面node browser-nav.js https://example.com node browser-nav.js https://example.com --new # 新标签页打开至此四大工具全部就绪。三、工具一eval —— 在页面里执行任意 JSbrowser-eval.js 是 browser-tools 的万能键把一段 JavaScript 交给当前激活的标签页执行并打印返回值。代码运行在异步上下文中await可以直接用。常用示例# 获取页面标题 node browser-eval.js document.title # 统计页面链接数量 node browser-eval.js document.querySelectorAll(a).length高阶技巧用 IIFE 一次性完成复杂操作官方文档建议把多步操作包进一个立即执行函数IIFE一次调用完成查询 → 交互 → 返回结果(function() { const data document.querySelector(#target).textContent; document.getElementById(btn1).click(); return JSON.stringify({ data, done: true }); })()三个省时要点来自 SKILL.md 的效率指南查 DOM 优先于截图——想确认页面结构时直接document.body.innerHTML.slice(0, 5000)解析 DOM比截图更快更准批量交互——多个点击写进一个循环里一次执行避免逐条调用先侦察后动手——先返回标题、表单数、按钮数等概况再精准定位目标元素。四、工具二pick —— 让你用鼠标帮 AI 指认元素页面结构复杂、AI 写不出准确选择器时browser-pick.js 就能派上用场。它会启动一个交互式元素拾取器node browser-pick.js 点击提交按钮工作方式非常直观页面底部弹出提示横幅鼠标移动时目标元素会被蓝色高亮框跟随单击选定一个元素并立即返回Cmd/Ctrl 点击追加多选选中的元素显示绿色描边Enter确认结束返回元素信息ESC取消操作返回内容包括标签名、id、class、文本内容、父级链等方便 AI 据此生成 CSS 选择器。典型场景你说帮我点击那个按钮或提取这几个卡片的文案AI 就会调用 pick 让你亲自点选省去反复猜测选择器的来回沟通。五、工具三cookies —— 一键排查登录与会话问题cookies 调试 是排查为什么 AI 总被踢回登录页的神器。运行命令后会列出当前标签页的所有 cookiesnode browser-cookies.js每条记录包含四要素名称/值、domain、path以及 httpOnly 与 secure 标志。实用场景登录后确认 session cookie 是否真正写入httpOnly 的 cookie 也能看到这正是 JS 读取不到的部分排查跨域请求失败是否因为缺少认证 cookie对比--profile模式与干净模式的 cookie 差异定位登录态丢失原因六、工具四screenshot —— 给页面状态拍一张照browser-screenshot.js 截取当前视口自动保存到系统临时目录文件名带时间戳形如screenshot-2026-10-02T00-17-00-000Z.png并在终端打印文件路径node browser-screenshot.js它适合两类场景视觉验证确认 UI 改动生效、弹窗是否按预期出现给 AI 看页面截图路径交给 AI 助手它就能看到渲染结果处理那些 DOM 里读不出来的样式问题注意 SKILL.md 的效率指南特意提醒优先用 eval 解析 DOM截图仅用于必须肉眼判断的场合——DOM 数据更结构化也不占上下文空间。七、进阶组合拳四大工具的高效配合组合 1eval 侦察 pick 定位 eval 批量操作先用 eval 摸清页面概况 → 拿不准的元素用 pick 让 AI 点选 → 确认选择器后用 IIFE 批量执行。三步走完复杂表单也能轻松搞定。组合 2操作后 sleep 再截图DOM 有异步更新时等待半秒再验证sleep 0.5 node browser-eval.js ...组合 3cookies screenshot 排查登录故障页面异常时先看 cookies 判断是否真的登录了再截图确认页面实际长什么样两条线索交叉定位问题根源。组合 4--profile 启动 全程免手动登录需要操作自己账号的场景如测试后台管理页面启动时加--profile复制日常浏览器配置cookies 和登录态自动继承省去一次次手动登录。八、常见问题与注意事项问题解决方法提示无法连接浏览器先运行node browser-start.js启动调试实例提示没有激活标签页用 browser-nav.js 先打开一个页面登录后状态丢失用browser-start.js --profile携带用户配置启动操作后数据没更新加sleep 0.5等待 DOM 渲染后再 eval⚠️ 安全提醒使用--profile会让调试实例访问你的真实账号请仅在本机信任环境下使用用完及时关闭调试浏览器。结语pi-skills 的 browser-tools 把 Chrome 变成了一个可被 AI 助手驱动的可见浏览器eval 负责灵活读写页面、pick 让人机协作指认元素、cookies 负责诊断登录态、screenshot 负责视觉验证。四者搭配使用无论是前端测试、动态内容抓取还是会话调试都能让 AI 编程助手真正动手替你完成浏览器里的操作。更多技能网页搜索、邮件、日历等可参阅 README.md 中的技能列表。【免费下载链接】pi-skillsSkills for pi coding agent (compatible with Claude Code and Codex CLI)项目地址: https://gitcode.com/gh_mirrors/pi/pi-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考