Chrome 无需扩展即可截取整页截图,但只能通过 DevTools。打开 DevTools,打开命令菜单,输入 screenshot,然后运行 Capture full size screenshot(截取完整尺寸的屏幕截图)。Chrome 会把整个页面保存为 PNG 文件。Chrome 的常规菜单中没有截图项:Google 的帮助在 Cast, save, and share(投放、保存和分享)下只列出了“分享”“发送到您的设备”和“创建二维码”。如需可以标注、可以导出为 PDF,或者能截取在面板内滚动的页面的截图,请安装 OpenScreenShot 并点击它的图标。
内置方法
- 打开你要截取的页面。
- 打开 DevTools:在 Windows 和 Linux 上按
F12或Ctrl+Shift+I,在 macOS 上按Cmd+Option+I。 - 打开命令菜单:按
Ctrl+Shift+P,macOS 上按Cmd+Shift+P。 - 输入
screenshot并选择 Capture full size screenshot(截取完整尺寸的屏幕截图)。 - Chrome 把整个页面保存为 PNG 文件。
设备模式中也有同样的截图功能。打开设备工具栏,打开它的 More options(更多选项)菜单,然后选择完整尺寸截图项。Google 的设备模式文档称之为 Capture a full size screenshot(截取完整尺寸的屏幕截图)。
整个流程没有单一的快捷键。Google 没有为这种截图说明任何标注工具,因此箭头、文字和遮盖需要在其他应用中完成。
局限
- 必须打开 DevTools:这个命令只在命令菜单和设备模式菜单中。
- 页面尺寸:宽度或高度达到 131,072 CSS 像素或以上的页面会被 Chromium 拒绝,并报错“Page is too large.”
- 吸顶和固定元素:截图时,Chromium 会把视图调整为整个页面的尺寸并隐藏滚动条。按窗口高度(
100vh)设置尺寸的区块以及固定页头或页脚可能会按这个高视图排版。固定页脚可能只在图片底部出现一次,全高的首屏区块可能被拉长。 - 懒加载:标记为
loading="lazy"的图片和框架只在你滚动到附近时才加载。请先把页面滚动一遍再运行命令,否则图片中的部分区域可能是空白。 - 内部滚动容器:Chromium 按页面本身的滚动尺寸确定截图大小。当页面在固定高度外壳内滚动一个面板时,例如网页应用或带有滚动内容窗格的文档网站,截图只显示该面板的一屏高度。
使用 OpenScreenShot
OpenScreenShot 逐个视口滚动页面,截取每个部分,再把各部分拼接成一张图片。它在第一个部分中截取固定页头,并只在顶部放置一次。滚动内部元素而非窗口的页面也能正常截取。高度超过 32,000 设备像素的页面最多保存为六张图片。
- 从 Chrome 应用商店 安装 OpenScreenShot,并把它的图标固定到工具栏。
- 打开页面并点击图标,或按
Ctrl+Shift+S(macOS 上为⌘⇧S)。 - 在编辑器中检查结果,尤其是顶部、底部以及所有吸顶导航。
- 点击保存图片并选择 PNG、JPEG、WebP 或 PDF。旁边的复制和 PDF 一键即可完成。
如果打开的是菜单而不是直接截图,请选择整页。这由一键 Express 模式设置控制。Chrome 整页截图指南逐步介绍了这款扩展的用法,包括区块缺失或重复的情况。截图模式参考和导出参考列出了所有选项。
DevTools 与 OpenScreenShot 对比
- 开始方式:DevTools 需要两个快捷键和一条输入的命令。OpenScreenShot 只需点击一次或按一个快捷键。
- 输出:DevTools 保存 PNG。OpenScreenShot 可导出 PNG、JPEG、WebP 或 PDF,也可复制图片。
- 编辑:DevTools 没有编辑功能。OpenScreenShot 会打开编辑器,提供箭头、文字、步骤编号、模糊和裁剪。
- 安装:DevTools 已内置于 Chrome。OpenScreenShot 是一款采用 MIT 许可证的扩展,在本地处理截图。
如何选择
- 在无法添加扩展的电脑上,如需为普通页面一次性生成 PNG,请使用 DevTools。
- 对于滚动内部面板的页面、带有吸顶页头的页面,以及分享前需要标注的截图,请使用 OpenScreenShot,例如错误报告或设计评审。
- 两者在 Microsoft Edge 中也都可以使用;Edge 指南介绍了 Edge 自带的 Screenshot 工具。
如果在 chrome://settings 等浏览器页面上截图失败,请参阅支持与已知限制。