抹茶柚子冰前阵子帮朋友整理一份产品文档，需要把一套几十屏长的网页完整保存下来，放到底稿里逐屏标注。我习惯性按下 Cmd+Shift+4，拉一个矩形区域，结果截到的只是当前屏幕这一块；往下滚一点，又得重新截一次，反复几次以后，拼接出来的效果惨不忍睹。macOS 自带的截图工具确实方便，但它没有"自动滚动截长图"这个功能。折腾了一圈之后我才意识到，问题不在 macOS，而在于我一直在用错工具——Chrome 本身就藏着整页截图的官方能力，而且远不止一种打开方式。这篇文章就围绕 MacOS 环境下用 Chrome 做整页截图这件事，把官方方案、命令行自动化、扩展插件、纯系统兜底全部理一遍，覆盖内容归档、竞品走查、设计评审这些常见场景，也会把我在实操中踩过的细节坑一并交代清楚。
1. 为什么Mac原生截图工具救不了长网页：先说清楚问题在哪
1.1 系统截图工具的四种方式和它们的共同短板
macOS 的截图能力其实不弱，日常用非常顺手：
- Cmd+Shift+3：截取整个屏幕
- Cmd+Shift+4：拖拽选择区域截图，按空格键可以切换成窗口截图
- Cmd+Shift+4 后按住 Shift+Option：可以调整选区大小，适合精确框选
- Cmd+Shift+5：打开带工具栏的截图/录屏面板，可以选择区域、窗口、全屏或者录屏
这套逻辑在国外社区里经常被夸"好用、干净、无打扰"，但它有一个明显的边界：所有模式都只捕捉当前屏幕可见范围内的像素。你截不到屏幕之外的内容，哪怕那个网页已经渲染好了，滚动条下面的部分就是不在截图范围内。
这不是"哪个开关没开"的问题，而是设计如此。系统截图工具读取的是当前帧缓冲区（framebuffer）中的画面，屏幕上没显示的区域根本不会出现在缓冲区里。想要截到长网页，必须让浏览器或者某个工具自动滚动页面，逐段截下来再拼接，或者干脆让浏览器以完整页面的尺寸重新渲染一次再截——这两条路在 macOS 系统层面都不存在。
如果你需要把一篇二十屏长的技术文章完整存下来，最原始的做法就是滚动一次、截一次，然后回到相册里一张张拼。我在公司里见过同事用 PPT 拼长图的场景，那种接头错位、字体大小不一致的体验，做过一次就再也不想做了。
1.2 为什么浏览器反而能搞定整页截图
因为浏览器和系统截图工具的机制完全不同。Chrome 解析完 HTML 和 CSS 之后，整个页面在内存里是一棵完整的渲染树，视口只是这棵树上的一个观察窗口。也就是说，哪怕你的屏幕只有一屏高，浏览器手里也攥着整个文档的布局信息。
当 Chrome 执行整页截图时，它做的事情是：临时把视口高度扩展到等于页面总高度，重新排版一次，然后用 GPU 合成整张位图输出。这就是为什么 Chrome 能截到"屏幕之外"的内容，而系统截图工具不能。
理解这个原理很重要。后面所有方案，不管是 DevTools 的 full size screenshot、Playwright 的 fullPage 参数，还是扩展插件的滚动拼接，本质上都是在利用浏览器的渲染能力来获取页面完整布局。
另一个被很多人忽略的事实是：Safari 在 macOS Monterey 之后的系统截图工具里也提供了"整页"选项，效果是在侧栏生成一个长条缩略图，点击后可以导出为 PDF。但那个出口固定在"Safari + PDF"的组合上，灵活性远不如 Chrome。如果你主要用 Chrome 工作，直接掌握 Chrome 的整页截图手段就够了。
这一章的核心结论：别在系统截图工具里找滚动截图按钮了，它没有。正路是从浏览器内部下手。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 开发者工具的全尺寸截图：官方自带且不需要装任何东西
2.1 最简操作路径
Chrome 开发者工具里的全尺寸截图功能，是我在 MacOS 上最推荐的整页截图入口。不需要安装任何扩展，不需要命令行知识，只要是 Chrome 就能用。
完整操作步骤如下：
- 用 Chrome 打开目标网页，等待内容加载完成。
- 按下 Cmd+Option+I（⌥⌘I）打开开发者工具。
- 按下 Cmd+Shift+P（⇧⌘P）打开命令菜单（Run Command）。
- 在命令输入框里输入
screenshot。 - 在弹出的候选列表里选择
Capture full size screenshot（捕获完整尺寸截图），回车。
Chrome 会在几秒内完成渲染和捕获，然后自动把一张完整的 PNG 图片保存到下载目录，文件名通常是网页标题加上一串随机字符。
这个命令面板是 Chrome 非常实用的一个隐藏入口。除了整页截图，它还支持截取当前视口（Capture screenshot）和截取选中的页面节点（Capture node screenshot）。第 5 步的候选项里通常同时出现这三个命令，如果你只想截当前画面的某一屏，选第一项；如果你在开发者工具的 Elements 面板里选中了一个具体的 DOM 节点，选第三项可以直接把这个元素截成图，这在做前端改动前后对比时特别有用。
2.2 它在底层做了什么
这个功能对应的 Chrome DevTools Protocol（CDP）命令是 Page.captureScreenshot，调用时带上了 captureBeyondViewport 参数。这个参数的作用就是允许浏览器捕获超出当前视口范围的内容。
浏览器拿到指令后的处理方式是：把整个页面当成一块超大画布，按照页面实际宽度和文