# @crouton-kit/capture 中文文档 规范地址：https://npmcn.com/package/%40crouton-kit/capture/ 版本：1\.4\.36 npm 元数据更新时间：2026-11-02T01:40:53.361Z 中文译文更新时间：2026-11-11T01:46:03.049Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40crouton-kit/capture 原文对照：https://npmcn.com/package/%40crouton-kit/capture/?lang=original 项目主页：https://github.com/CaptainCrouton89/capture#readme 源码仓库：https://github.com/CaptainCrouton89/capture ## 关键信息（来自 npm 元数据） - 包体积（解压后）：15.1 MB，176 个文件 - TypeScript 类型：未声明 - 运行依赖：5 个 - 首次发布：2026-04-16T22:52:54.104Z - 最新版本发布：2026-11-02T01:40:53.213Z - 近 30 天下载量：6972（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：51（近 12 个月 51 个） ## 中文简介 通过 CDP 浏览器自动化和 UI 验证——基于会话的截图, HAR, a11y, 点击/类型和 JS exec ## 安装 ```sh npm install @crouton-kit/capture ``` 也可以使用：`pnpm add @crouton-kit/capture`、`yarn add @crouton-kit/capture`、`bun add @crouton-kit/capture` ## README # 抓取 — 一种基于 Chrome DevTools 协议的代理服务器自动化命令行 ![capture](https://raw.githubusercontent.com/crouton-labs/capture/main/assets/banner.svg) [![ci](https://img.shields.io/github/actions/workflow/status/crouton-labs/capture/freshness.yml?branch=main&label=ci)](https://github.com/crouton-labs/capture/actions/workflows/freshness.yml) [![npm](https://img.shields.io/npm/v/@crouton-kit/capture?label=npm)](https://www.npmjs.com/package/@crouton-kit/capture) [![license](https://img.shields.io/badge/license-MIT-blue)](https://npmcn.com/package/%40crouton-kit/capture/LICENSE) **浏览器自动化可以测量而不是猜测.** 为特工建造的 CDP 命令线. 截图显示一个页面是什么样子。 它没有告诉你为什么按钮不起作用. `capture` 解答关于一个有数字和坐标的活页的问题:覆盖这个按钮的内容是什么,哪个CSS规则将其移动,一个点击的页面需要多长时间,两个状态之间有什么变化,以及哪个像素移动和何时移动. 每个发现都带回了元素,几何,以及从中读取的证据. ```bash 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` 名称: `#consent`z指数99, **涵盖范围:100.0%** 按钮的墨盒. Playwright抛出"元素截取指针事件"并命名为"一无所有". 一个截图显示一个完美的页面. `capture measure map paint --selector "#pay"` • 妇女 [22s的完整剪辑](https://npmcn.com/package/%40crouton-kit/capture/demo/1-ghost-overlay.mp4) ### 2\. 页面看完。 测量结果不一致. 一个指令针对阈值测量一个团队访问页面,并在真实坐标上绘制出每个失败:在44×44层下28×28的一行控制,在2.16:1的对比下,一个身份列剪取它显示的地址. 每一个发现都携带了自己证据的被削去的PNG,而大门出口为非零. `capture measure check --for tap-targets,contrast,truncation --gate` • 妇女 [22s的完整剪辑](https://npmcn.com/package/%40crouton-kit/capture/demo/2-check-gate.mp4) ### 3\. 两次更改已运出。 哪个动了按钮? 一个报告切换到"周刊",然后一个设计系统样式表登陆现场. 发布按钮是新的 一个像素diff只能说"3%的像素不同"——这个名称将元素,其两个框,移动多远,以及现在获胜的宣告,降为: `tokens-v2.css` 页:1. `capture measure diff --before --after ` • 妇女 [27s的完整剪辑](https://npmcn.com/package/%40crouton-kit/capture/demo/3-measure-diff.mp4) ### 4.布局在两个像素宽度之间翻转. 哪两个? 而不是拖出一扇窗边 直到有东西崩溃, 扫描轴线。 取景台阶619 → 620 → 621 → 622,网格为一列至二列,并用命令括号来表示它发生的确切对相. `capture measure sweep --axis width --from 619 --to 622` • 妇女 [21分整发](https://npmcn.com/package/%40crouton-kit/capture/demo/4-sweep-breakpoint.mp4) ### 5\. 命名一个组件。 获取组件. 代理商要求一张卡片,然后得到一个被裁剪,加成,放大的精确的卡片图像——没有坐标,没有全景口截图可以被一一一地一一地一一地一一地取出. 它可以通过CSS选择器或屏幕阅读器读取的可见标签询问. 问 `button` 6场比赛时,它拒绝猜测和列出全部6场比赛. `capture page shot --crop-selector "#revenue-card" --pad 8 --zoom 1.5` • 妇女 [24分整发](https://npmcn.com/package/%40crouton-kit/capture/demo/5-component-shot.mp4) ### 6\. 点击实际回答的速度有多快? 记录出真实的相互作用,再从录音中读出其时间线来取出而非眼球取出截图:输入发送,DOM突变为+7.20ms,第一次涂装为+18.76ms,跨越6276已更改像素,安放于+325.06ms. 每行取出所出之证名. `capture motion response --action "click:Run sweep"` • 妇女 [23分整发](https://npmcn.com/package/%40crouton-kit/capture/demo/6-motion-response.mp4) ### 7\. 动静7秒,1秒. 模特儿不能看视频 把它拿来 屏幕录音,你真的 递出几十个不同的框 理性一次一个 - 昂贵,仍然没有希望, 因为你关心的是运动 _介于_ 框架,没有单一的框架包含它. `motion mask` 将整个交互折叠成一个图像,即模型读取良好的格式。 颜色编码 _何时_ 每个像素被改变——蓝色是早期的,红色是后期的——所以有效载荷的整个路线可以一目了然. 在它下面, 变化的地区 排名第一, 每一个移动的窗口。 经纪人会看动画的. `capture motion mask --limit 4` • 妇女 [22s的完整剪辑](https://npmcn.com/package/%40crouton-kit/capture/demo/7-motion-mask.mp4) ### 8\. 驱动已签名的浏览器. 没有存储状态舞蹈,也没有单独的自动化配置. 随附 `--port`,通过已经放在你面前的标签, 驱动它, 并用一个捆: 录音, HAR,镜头和测量在一起。 网络面板取自俘获的HAR——从该条目读取的每一个字段,没有任何推断,并扣取了印有长度标记的证书头. `capture session start --target --port 9860` • 妇女 [满分,30分](https://npmcn.com/package/%40crouton-kit/capture/demo/8-live-session.mp4) ### 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 --name CLSCulprits --full` • 妇女 [24分整发](https://npmcn.com/package/%40crouton-kit/capture/demo/9-perf-vitals.mp4) ### 10\. 小组讨论已关闭。 浏览器仍然持有全部5个. 一个控制台打开并关闭了五个会议小组讨论。 甲板结束为空,页面报告为0开口——但有两张高的快照不同意. `heap diff` 列出仍可到达的10个可分离的节点,并列出建造该节点的构造器所命名的每个节点: `
`。 。 。 . `heap census` 将1,049,008个保留字节放在其中之一后面 `heap retainers` 在边缘行走 保持它的生命——一个 `ClosedSession` 对象持有其面板 `element` 属性. `capture heap retainers --node ` • 妇女 [24分整发](https://npmcn.com/package/%40crouton-kit/capture/demo/10-heap-detached.mp4) ### 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 ` • 妇女 [26分整发](https://npmcn.com/package/%40crouton-kit/capture/demo/11-mock-silent-failure.mp4) ## 快开始 需要节点和一个克罗姆. `capture tab launch` 启动一个没有头部的浏览器, 来捕捉拥有和收获的, 它正在寻找 `$CAPTURE_BROWSER`,然后是一个 `~/.cache/puppeteer` 克罗姆,然后是一个系统克罗姆。 如果一个CDP启用的浏览器已经在运行中,捕获可以附加到这个上. ```bash 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 # 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 -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:`, (中文(简体) ), `axid:`,或 `backend:` ## 对于特工 CLI 设计为被一个模型读取: 错误是结构化的, 每个错误都带有一个 `follow_up` 指定将修改的命令,每个级别都有帮助. ## 许可证 麻省理工学院 见 [捐款额](https://npmcn.com/package/%40crouton-kit/capture/CONTRIBUTING.md) 提供捐款. ## 常见问题 ### @crouton-kit/capture 是什么？ 通过 CDP 浏览器自动化和 UI 验证——基于会话的截图, HAR, a11y, 点击/类型和 JS exec ### 如何安装 @crouton-kit/capture？ 在项目目录运行 npm install @crouton-kit/capture，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 capture，可以用 npx capture 直接运行。 ### @crouton-kit/capture 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/crouton-kit\_\_capture 是否存在。 ### @crouton-kit/capture 可以商用吗？ @crouton-kit/capture 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @crouton-kit/capture 的下载量有多少？ 根据 npm 官方下载统计，@crouton-kit/capture 在 2026/10/11 – 2026/11/09 这 30 天内被下载 6,972 次，日均约 232 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @crouton-kit/capture 还在维护吗？ 最新版本 1\.4\.36 发布于 2026/11/02（9 天前）；至今共发布 51 个版本，其中过去 12 个月发布了 51 个；首次发布于 2026/04/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。