full-page-screenshot

full-page-screenshot skill 概览

full-page-screenshot 能做什么

full-page-screenshot 是一个用于 Browser Automation 的 skill，可将完整网页捕获为单张 PNG，包括首屏以下的内容。它基于独立的 Node.js 脚本，通过 Chrome DevTools Protocol 与 Chrome 通信，因此能够处理长页面、懒加载内容、单页应用，以及普通视口截图会遗漏大部分内容的页面。

最适合的用户与任务

如果你需要让 AI agent 在 QA、视觉审查、文档编写、设计审计、缺陷报告、竞品研究或已登录产品演示中稳定生成整页截图，适合安装这个 skill。当目标页面已经在 Chrome 中打开时，它尤其有用，因为 full-page-screenshot skill 可以列出可用标签页，并捕获选中的标签页，无需用户重新恢复登录状态。

关键差异点

full-page-screenshot skill 的核心价值在于执行可靠性：它直接使用 Chrome DevTools Protocol，除 Node.js 22+ 和 Chrome/Chromium 之外没有外部包依赖，并同时支持已有标签页捕获和基于 URL 的捕获。对于已登录的仪表盘、staging 环境以及 SSO 后面的页面，已有标签页工作流是最重要的差异点。

安装前需要确认的限制

安装前，请确认你的环境可以运行 Node.js 22+，并且 Chrome remote debugging 可用。这个 skill 不是托管式截图 API，也不会绕过登录认证、CAPTCHA、本地网络限制、cookie 横幅，或有意阻止自动化的页面。它最适合的场景是：用户可以在 Chrome 中正常打开页面，然后让 agent 从这个已有页面进行捕获。

如何使用 full-page-screenshot skill

full-page-screenshot 安装与就绪检查

从仓库路径安装 skill：

npx skills add alirezarezvani/claude-skills --skill full-page-screenshot

安装后，先阅读 SKILL.md，再查看 scripts/full-page-screenshot.mjs。这个脚本是实际执行层；如果你要在受限环境或类似 CI 的环境中使用该 skill，使用前值得先读一遍。

运行就绪检查：

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --check

如果 Chrome debugging 不可用，请打开 chrome://inspect/#remote-debugging 并为当前浏览器实例启用 remote debugging，或按你的本地策略使用调试端口启动 Chrome/Chromium。

已登录页面使用已有标签页

对于已认证页面、管理后台，或任何依赖当前浏览器会话的页面，应使用已有标签页工作流。先列出已打开的标签页：

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --list

根据标题或 URL 找到对应标签页，然后进行捕获：

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" <targetId> /tmp/screenshot.png --width 1200 --dpr 1

这样可以避免丢失 session cookies，通常也比在后台打开一个全新的 URL 更可靠。请使用与你要审查的设计断点匹配的宽度，例如移动端布局可用 390，平板可用 768，桌面端可用 1200/1440。

公开页面使用 URL 模式

对于公开页面、文档、营销页，或不需要登录的页面，可以使用 URL 模式：

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --url "https://example.com" /tmp/screenshot.png --width 1200 --dpr 1 --wait 15000

如果页面依赖延迟渲染、客户端路由、由 analytics 触发的内容，或懒加载区块，请增大 --wait。为了控制文件大小并提升审查速度，通常保持 --dpr 1；只有当像素密度比输出体积更重要时，才使用更高的 DPR。

更好调用 full-page-screenshot 的提示词模式

较弱的提示词是：“Take a screenshot of this page.” 更好的 full-page-screenshot 使用提示词应包含 URL 或标签页上下文、登录状态、视口宽度、等待需求和输出路径：

Use the full-page-screenshot skill to capture the already-open Chrome tab for staging.example.com/dashboard. I am logged in. Use desktop width 1440, DPR 1, wait long enough for lazy charts to render, and save the PNG to /tmp/dashboard-full-page.png. If multiple matching tabs exist, list them first and ask me which target ID to use.

这样 agent 就有足够信息在 --list、已有标签页捕获和 --url 模式之间做出选择，而不需要猜测。

full-page-screenshot skill 常见问题

full-page-screenshot 比普通截图提示词更好吗？

是的，前提是你的需求是捕获完整页面，而不是只截取可见视口。通用提示词可能依赖运行环境暴露的任意截图能力，常见结果是只得到当前屏幕。full-page-screenshot skill 为 agent 提供了明确的基于 CDP 的工作流、命令结构，以及针对已打开标签页的备用路径。

新手可以使用这个 skill 吗？

可以，只要能够安装 skills，并能在启用 remote debugging 的情况下运行 Chrome。命令本身比较直接，但设置过程比浏览器扩展更偏技术。新手建议先运行 --check，再运行 --list，然后先捕获一个已有标签页，最后再尝试 URL 模式。

什么时候不应该使用这个 skill？

如果你需要定时截图监控、跨浏览器渲染对比、截图 diff、OCR、PDF 导出，或大规模云端执行，就不适合使用它。这个 skill 从 Chrome/Chromium 捕获 PNG 截图；它不能替代 Playwright 测试套件、视觉回归平台或托管式截图 API。

它适用于 Browser Automation 工作流吗？

适用。full-page-screenshot for Browser Automation 很适合在 agent 完成导航、登录、应用筛选条件或等待某个 UI 状态之后，作为一个确定性的捕获步骤。它最适合作为更大浏览器工作流中的最终截图工具，而不是独立承担完整导航或测试框架的角色。

如何改进 full-page-screenshot skill 的使用效果

改进 full-page-screenshot 输入信息

输入越清晰，截图质量越高。请说明页面状态，而不只是页面地址：已登录账号、已选筛选条件、弹窗状态、视口宽度、预期已加载元素，以及输出文件名。如果页面是动态的，请指出捕获前必须可见的元素或区块，这样 agent 才知道是否需要更长等待时间，或是否需要人工确认。

减少常见捕获失败

最常见的阻塞因素包括：Chrome remote debugging 未启用、对需要登录的页面使用 URL 模式、在懒加载内容完成前就截图，以及使用了错误的视口宽度。解决方式包括运行 --check，对已认证页面优先使用已有标签页模式，对公开 SPA 增大 --wait，并让 --width 与你实际想检查的布局一致。

在第一张 PNG 之后迭代

检查第一版输出是否缺少底部内容、sticky headers 是否遮挡区块、是否有 cookie 横幅、图片是否未加载，或响应式布局是否不符合预期。然后用不同宽度、更长等待时间，或已经准备好的标签页重新运行。如果出现 cookie 横幅或弹窗，请先在 Chrome 中关闭它，再捕获已有标签页，而不是依赖全新的后台 URL。

扩展前先阅读脚本

如果你想自定义这个 skill，请在编辑提示词之前先阅读 scripts/full-page-screenshot.mjs。脚本控制标签页发现、视口宽度、DPR、等待行为和 CDP 捕获。可改进的方向包括更清晰的错误信息、更多等待策略、输出命名约定，或在你的工作流允许时加入可选 CSS 处理，用于隐藏 sticky overlays。