想把整个网页从头到尾存成一张图发给朋友,用截图工具滚一屏拼一屏,拼到第三屏就想放弃。其实主流浏览器基本都藏了网页长截图功能,不用装东西。

Edge 和 Chrome 走开发者工具

按 F12 打开开发者工具,再按 Ctrl+Shift+P 调出命令面板,输入 capture,选 capture full size screenshot,整页会自动拼成一张 PNG 进下载文件夹。Chrome 的命令一模一样。本地 HTML 文件打开的静态页也有效,做页面归档很方便。缺点是截的是原始页面,弹窗和 cookie 提示条也会一起进图。

只想要页面上某一块的图,在元素面板选中那一块,命令面板里输 capture node screenshot,只截选中的节点,提 bug 反馈时特别好用。

Firefox 最省事

网页空白处点右键,选截图,再点保存整页,两下搞定。也可以按 Ctrl+Shift+S 唤出截图工具,框选或选整页,菜单里找不到入口时走快捷键最快。

要标注就装个扩展

经常要截图后加箭头、打马赛克,装 GoFullPage 这类扩展,点一下自动滚到底拼成长图,还能导出 PDF。手机端多数浏览器也内置了:较新版本的安卓 Chrome 在分享菜单里有长截图入口,iPhone 上 Safari 截屏后点左下角缩略图,选整页选项。

两类页面截不全

一类是要登录才能看的内容,命令和扩展都只能截到登录前的样子,先登录再截。另一类是画布型应用,比如网页版表格、在线白板,可视区域外的东西根本没渲染,滚多远都拼不出来,这种只能分段截完手动拼。

常见的坑

  • 超长信息流截出来图特别大,发群前 PNG 转 JPG 一般能小一半
  • 页面用了懒加载,命令截图可能只截到灰色占位块,先手动滚到底再截
  • 带吸顶导航的页面,导航栏会在长图里重复几十次,截图前在控制台把它隐藏掉
  • iframe 嵌的地图、视频区域常截不进去,属于正常现象

一个实际判断:偶尔用一次,记住 F12 加 Ctrl+Shift+P 就够;天天要发标注图的,直接上扩展省时间。