在Chrome里给整张长页面截图,最快的办法不需要任何扩展:按F12打开DevTools,按Ctrl + Shift + P(Mac上是Cmd + Shift + P),输入“screenshot”,选择完整尺寸的选项。Chrome会把整个页面保存为一张很长的PNG。页面很多或需要放进CI时,用脚本加一个选项就能做到同样的事。如果结果被截断、出现空白或页头重复,原因几乎总是懒加载、高度限制或固定元素,下面分别给出解决办法。
方法1:DevTools,无需安装
- 打开页面,等它完全加载。
- 按
F12打开DevTools。 - 用
Ctrl + Shift + P(Mac上是Cmd + Shift + P)打开命令菜单,输入“screenshot”。 - 选择Capture full size screenshot。Chrome会下载一张PNG。
同一个命令菜单里还有截取可见区域和选中元素的命令。Chrome文档确认菜单可用这些快捷键打开,并包含“Capture area screenshot”命令,DevTools截图技巧介绍了截取整页、单个节点和一块区域。
方法2:以手机宽度截取整页
先在上面的预览里选一台设备,检查布局。要按手机渲染的样子截取整页,使用设备模式:用Ctrl + Shift + M(Mac上是Cmd + Shift + M)打开设备工具栏,选择设备,打开More options菜单,选择Capture full size screenshot。Chrome的设备模式文档列出了同样的选项,还有用于带手机轮廓截图的Show device frame。包含像素比和文件命名建议的分步说明见如何在电脑上截取网站的手机截图。
方法3:脚本,适合大量页面或CI
如果需要对几十个页面做同样的截图,就把它自动化。在Playwright里只需要一个选项:
await page.screenshot({ path: 'page.png', fullPage: true });先设置viewport(例如手机尺寸用{ width: 390, height: 844 }),脚本每次运行都会为每个页面生成一张图片。fullPage在Playwright截图指南中有说明。
截图为什么被截断、空白或重复
这些问题源于整页截图的工作方式:浏览器把视口扩展到完整高度,不滚动,只渲染一次。一篇关于Puppeteer整页截图的文章列出了原因和解决办法,适用于任何基于Chrome的截图:
- 懒加载的图片会保持占位状态,因为它们在滚动进入可视区域时才加载,而截图过程不会滚动。截图前把页面滚到底再滚回来,并等图片加载完成。
- 特别高的页面会被截断。作者报告Puppeteer的默认上限是16,384像素,有些配置可达32,768像素。超过这个高度,就分段截图再拼接。
- 固定元素和sticky元素会重复出现或位置错误。截图前把它们改成
position: absolute或隐藏。
不同任务用哪种方法
| 任务 | 最佳方法 |
|---|---|
| 一个页面,只截一次 | DevTools命令菜单 |
| 一个页面,手机宽度 | DevTools设备模式 |
| 几十个页面,或每次发布 | 带fullPage: true的脚本 |
| 高度超过约16,000像素的页面 | 分段截图再拼接 |
常见问题
不装扩展怎么在Chrome里截取整个页面?
打开DevTools,用Ctrl + Shift + P打开命令菜单,输入“screenshot”,选择Capture full size screenshot。
为什么整页截图里的图片缺失?
这些图片是懒加载的,从未进入可视区域。把页面完整滚动一遍,等图片加载完,再重新截图。
能以手机尺寸截取整页吗?
可以。使用DevTools设备模式,选择设备,然后在More options菜单中选择Capture full size screenshot。
来源:Chrome DevTools,命令菜单、设备模式和截图技巧;Playwright截图;Puppeteer整页截图,DEV Community,均于2026年10月28日查阅。