抓取 — 一种基于 Chrome DevTools 协议的代理服务器自动化命令行
浏览器自动化可以测量而不是猜测. 为特工建造的 CDP 命令线.
截图显示一个页面是什么样子。 它没有告诉你为什么按钮不起作用.
capture 解答关于一个有数字和坐标的活页的问题:覆盖这个按钮的内容是什么,哪个CSS规则将其移动,一个点击的页面需要多长时间,两个状态之间有什么变化,以及哪个像素移动和何时移动. 每个发现都带回了元素,几何,以及从中读取的证据.
npm install -g @crouton-kit/capture
反对替代办法
比较 @playwright/mcp 0.079和 chrome-devtools-mcp 1.8.0——Chrome DevTools MCP表面克洛德码驱动器——在这些已出版的版本上读取.
两舰都有一个JavaScript出逃舱门, 所以这大部分是 可达到 无论是哪一个,通过自己写代码。 下面的qq表示答案不作为事实还给你;这意味着你写并维持测量.
| 捕获 | 剧作家 MCP | Chrome DevTools 磁共振 | |
|---|---|---|---|
| 每个元素的相接框 | ✅ | ✅ browser_snapshot boxes:true | 必须使用生JS |
| 命名覆盖目标的元素 | ✅ | 必须使用生JS | 必须使用生JS |
| 占目标方框的百分比 | ✅ | 必须使用生JS | 必须使用生JS |
| 一个点的完整接收堆栈 | ✅ | 必须使用生JS | 必须使用生JS |
| 赢得 CSS 财产申报 | ✅ | 必须使用原始 CDP | QQ 无法到达 – 没有 CSS 工具, 没有 CDP 通过 |
| 其具体性和来源位置 | ✅ | 必须使用原始 CDP | 无法达到 |
| 试射目标和对比结果 | ✅ | 必须使用生JS | ✅ lighthouse_audit,写入报表文件 |
| 每一个发现的正方形 | ✅ | 必须使用生JS | 报告文件内 |
| 每个发现的PNG作物 | ✅ | 每个元素一个截图呼叫 | 无收成 |
| 两个州之间的平面样式和几何三角洲 | ✅ | 必须使用生JS | 必须使用生JS |
| 改变财产的连带出处 | ✅ | 必须使用原始 CDP | 无法达到 |
| 两个州的Raster diff | ✅ | 迪夫两个截取自己 | 迪夫两个截取自己 |
| 在一个命令中步入宽度范围 | ✅ | 您自己的调整大小循环 | 您自己的调整大小循环 |
| 将布局状态变化的确切像素刻出括号 | ✅ | 您自己的调整大小循环 | 您自己的调整大小循环 |
| 输入 · 突变 · 油漆 · 确定一个相互作用 | ✅ | 仅限视频文件 | QQ 追踪洞察力为页面级别 |
| 通过动画显示一个元素的相框几何 | ✅ | 仅限视频文件 | 必须使用生JS |
| 元素导致的像素区域变化 | ✅ | 必须使用生JS | 必须使用生JS |
| 整个交互像一个图像 | ✅ | ❌ | ❌ |
| 来自命令规则的 Stub 网络响应 | ✅ tab mock | ✅ browser_route | 没有拦截工具 |
| 具有子部分和归属性的核心网络生命 | ✅ perf vitals | 用于跟踪查看器的 Track 文件 | 追踪真知灼见 |
| DevTools 的洞察力集——制成阻断,强迫回流,转移罪犯 | ✅ perf insights | ❌ | ✅ |
| 灯塔 回复中节点失效 | QQ 节点 DOM 路径、 选择器、 片段 | ❌ | QQ 得分和计分; 报告文件中的调查结果 |
| 高地普查、保留路径、快照 | ✅ heap | ❌ | ✅后 --memoryDebugging |
二者仍作所取所取所取所取所取事. Playwright MCP是交叉浏览器——最尖锐的结构缺口——并拥有存储状态保存/重存,测试码生成,设备预设,PDF导出,更丰富的输入动词(hover,拖放,文件上传). Chrome DevTools MCP将Chrome扩展和PWA自动化,并设有CPU-throttling预设. 抓取是 chromium - 并且点到一个问题—— 这页实际上在做什么, 数字.
看见了
11个短片. 每个覆盖都是真实的:从命令的实际 stdout中取出文本,在被打印的坐标上绘制出框,被设定的图像是实际被写入的命令的文件.
下面的每个玩家都包含完整片段. 使用它的控制器来播放,暂停,刷新或者全屏.
1. 每个指挥部都成功。 页面还被打破.
一个特工检查出来。 宣传码适用,总降幅为691.20 ~ 518.40美元,因此该页面明显有效. 然后它点击 全部采购 ——报告点击后,无事可做. 而不是猜测,它衡量。 点击测试可以解决点击非按钮的问题 measure map paint 名称: #consentz指数99, 涵盖范围:100.0% 按钮的墨盒.
Playwright抛出"元素截取指针事件"并命名为"一无所有". 一个截图显示一个完美的页面.
capture measure map paint <snap> --selector "#pay" • 妇女 22s的完整剪辑
2. 页面看完。 测量结果不一致.
一个指令针对阈值测量一个团队访问页面,并在真实坐标上绘制出每个失败:在44×44层下28×28的一行控制,在2.16:1的对比下,一个身份列剪取它显示的地址. 每一个发现都携带了自己证据的被削去的PNG,而大门出口为非零.
capture measure check <snap> --for tap-targets,contrast,truncation --gate • 妇女 22s的完整剪辑
3. 两次更改已运出。 哪个动了按钮?
一个报告切换到"周刊",然后一个设计系统样式表登陆现场. 发布按钮是新的 一个像素diff只能说"3%的像素不同"——这个名称将元素,其两个框,移动多远,以及现在获胜的宣告,降为: tokens-v2.css 页:1.
capture measure diff --before <snap> --after <snap> • 妇女 27s的完整剪辑
4.布局在两个像素宽度之间翻转. 哪两个?
而不是拖出一扇窗边 直到有东西崩溃, 扫描轴线。 取景台阶619 → 620 → 621 → 622,网格为一列至二列,并用命令括号来表示它发生的确切对相.
capture measure sweep --axis width --from 619 --to 622 • 妇女 21分整发
5. 命名一个组件。 获取组件.
代理商要求一张卡片,然后得到一个被裁剪,加成,放大的精确的卡片图像——没有坐标,没有全景口截图可以被一一一地一一地一一地一一地取出. 它可以通过CSS选择器或屏幕阅读器读取的可见标签询问. 问 button 6场比赛时,它拒绝猜测和列出全部6场比赛.
capture page shot --crop-selector "#revenue-card" --pad 8 --zoom 1.5 • 妇女 24分整发
6. 点击实际回答的速度有多快?
记录出真实的相互作用,再从录音中读出其时间线来取出而非眼球取出截图:输入发送,DOM突变为+7.20ms,第一次涂装为+18.76ms,跨越6276已更改像素,安放于+325.06ms. 每行取出所出之证名.
capture motion response <rec> --action "click:Run sweep" • 妇女 23分整发
7. 动静7秒,1秒.
模特儿不能看视频 把它拿来 屏幕录音,你真的 递出几十个不同的框 理性一次一个 - 昂贵,仍然没有希望, 因为你关心的是运动 介于 框架,没有单一的框架包含它.
motion mask 将整个交互折叠成一个图像,即模型读取良好的格式。 颜色编码 何时 每个像素被改变——蓝色是早期的,红色是后期的——所以有效载荷的整个路线可以一目了然. 在它下面, 变化的地区 排名第一, 每一个移动的窗口。 经纪人会看动画的.
capture motion mask <rec> --limit 4 • 妇女 22s的完整剪辑
8. 驱动已签名的浏览器.
没有存储状态舞蹈,也没有单独的自动化配置. 随附 --port,通过已经放在你面前的标签, 驱动它, 并用一个捆: 录音, HAR,镜头和测量在一起。 网络面板取自俘获的HAR——从该条目读取的每一个字段,没有任何推断,并扣取了印有长度标记的证书头.
capture session start --target <tab-id> --port 9860 • 妇女 满分,30分
9. 牌画先出. 然后一个图像会移动400像素.
记录一次负载,然后问不同的问题. perf vitals 根据元素和URL的命名,读取了最大的一幅图画——几乎全部都是一幅图象的负载——并列出图象造成的变化. perf insights 返回每次移动的元素,其前后的矩形为: old_rect [28,99,1224,174] → new_rect [28,499,1224,174]接下来 measure explain 测量已结算页面和打印的相同元素 x=28 y=499.75 w=1224 h=172.64. 微量引擎和DOM就KPI一行的结局达成一致.
capture perf insights <trace> --name CLSCulprits --full • 妇女 24分整发
10. 小组讨论已关闭。 浏览器仍然持有全部5个.
一个控制台打开并关闭了五个会议小组讨论。 甲板结束为空,页面报告为0开口——但有两张高的快照不同意. heap diff 列出仍可到达的10个可分离的节点,并列出建造该节点的构造器所命名的每个节点: <div class="panel" id="session-1">。 。 。 . heap census 将1,049,008个保留字节放在其中之一后面 heap retainers 在边缘行走 保持它的生命——一个 ClosedSession 对象持有其面板 element 属性.
capture heap retainers <snap> --node <node-id> • 妇女 24分整发
11. API从未答复。 仪表板没有改变一个像素.
探员说 $518.40 关闭一个收入仪表板,安装一个规则文档,以失败的参数 API,并重新加载。 骨架会发光,卡片会填满,页面会显示 $518.40 再来一次. measure diff --pixels 报告 0 变化像素,横跨 1280x800,而用于该 URL 的 HAR 则同时负载: 200 · 56 bytes,则 response incomplete: failed。 。 。 测量就是显示故障在屏幕上没有留下可看到的东西.
capture tab mock start --rules <rules.json> • 妇女 26分整发
快开始
需要节点和一个克罗姆. capture tab launch 启动一个没有头部的浏览器, 来捕捉拥有和收获的, 它正在寻找 $CAPTURE_BROWSER,然后是一个 ~/.cache/puppeteer 克罗姆,然后是一个系统克罗姆。 如果一个CDP启用的浏览器已经在运行中,捕获可以附加到这个上.
capture tab launch # start a browser capture owns
capture session start --url https://example.com # open a tab, begin recording traffic
capture measure snap # → snap-mtdpfnkr-08fbabdd
capture measure check snap-mtdpfnkr-08fbabdd --for contrast,tap-targets
capture session stop <session-id> # write the bundle manifest
在开关代理节点下(CRTR_NODE_ID 集),一个没有的浏览器命令 --port,没有 --target 并且该节点的任何活动会话都不得拒绝(no_owned_browser而不是回到 CDP_PORT, (中文(简体) ), CDP_TARGET 或localhost发现, 它可以到达另一个节点的浏览器。 开始会话, 或通过 --port 或者说 --target外壳 CRTR_NODE_ID 不变.
measure check 报告真实的测量,而不是意见:
1. tap-targets — html > body > div > p:nth-of-type(2) > a measures 82×18px; threshold is 44×44px
Rect: x=160 y=186.078125 w=82 h=18
crop: snap-mtdpfnkr-08fbabdd/findings/1-tap-targets.png
添加 --gate 改为 check 或者说 diff 发现后它就会离开非零, 所以同样的指令在CI中起作用.
命令表面
十根发相. 每片叶子都默认产生异能 并反射相同的结果 --json。 。 。 .
| 根号 | 它拥有的 |
|---|---|
session | 文物容器——记录HAR,捆绑文物,设置活性上下文 |
page | 动词对活页标签—— click, (中文(简体) ), type, (中文(简体) ), scroll, (中文(简体) ), navigate, (中文(简体) ), exec, (中文(简体) ), repeat, (中文(简体) ), shot, (中文(简体) ), elements, (中文(简体) ), inspect |
tab | 浏览器和制表管道—— launch, (中文(简体) ), quit, (中文(简体) ), list, (中文(简体) ), open, (中文(简体) ), close, (中文(简体) ), reset, (中文(简体) ), network, (中文(简体) ), mock |
measure | 已结算的 snapshot 底片加只读的查询 —— snap, (中文(简体) ), check, (中文(简体) ), diff, (中文(简体) ), explain, (中文(简体) ), sweep, (中文(简体) ), census, (中文(简体) ), map, (中文(简体) ), text |
motion | 录音机的寿命周期加上通过录音的查询—— rec, (中文(简体) ), mask, (中文(简体) ), timeline, (中文(简体) ), response, (中文(简体) ), jank |
perf | 性能追踪底物—— trace 记录, vitals 财务报告和审定财务报表 insights 读吧 |
heap | V8高射速底盘 - snapshot, (中文(简体) ), census, (中文(简体) ), objects, (中文(简体) ), retainers, (中文(简体) ), diff |
lighthouse | 以 URL 运行灯塔并存储其未修改的报告 |
cdp | 原始 Chrome DevTools 协议出舱 |
lib | 库- lib introduction, 用于在标签中运行已取消的 libs |
为子命令列表运行其中的空置, 或 capture <root> <leaf> -h 叶子的用法.
如何融为一体
一个会话是容器;记录的底物是使查询变得便宜的.
- 届会 这是容器。 它打开或采用一个标签,在活动时记录HAR,并在停止时写一个捆绑清单. 所有生产的东西,当它运行 土地在一个目录.
- 一个快照 (单位:千美元)
measure snap)一次驱动页面并写出一个已定居的底片——几何,样式,可访问性,地层,命中测试,文本,表格,截图. 每一个measure叶子是一个廉价的读取 上面的文物, 从来没有重新驱动浏览器. - 录音 (单位:千美元)
motion rec)捕捉一个交互,一发或由多个指令构成. 每一个motion叶子读取最后的录音. - 性能追踪 (单位:千美元)
perf trace和 堆积快照 (单位:千美元)heap snapshot工作方式相同:记录一次,然后vitals编号 :insights财务报告和审定财务报表census编号 :objects编号 :retainers编号 :diff对文物进行只读查询.
0号出口的发现是报告,不是坠机。 仅 check 财务报告和审定财务报表 diff 接受 --gate,将结果变成2号出口.
目标要素
驱动动词通过一个单一的语法解决了完全一个要素,并拒绝一个与候选人名单相模棱两可的目标,而不是选择一个:
- 空 CSS 选择器(优先)
- 当 CSS 找不到任何可用名称时
ax:<name>, (中文(简体) ),axid:<id>,或backend:<id>
对于特工
CLI 设计为被一个模型读取: 错误是结构化的, 每个错误都带有一个 follow_up 指定将修改的命令,每个级别都有帮助.
许可证
麻省理工学院
见 捐款额 提供捐款.