浏览器中的全页面截图

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!

在浏览器中获取“全页面”截图非常有用。 也就是说,不仅仅是可见区域。 可见区域非常容易获得,只需对屏幕进行截图即可。 全页面截图会捕获整个网站,即使需要滚动才能查看所有内容。 您可以对可见区域拍摄单个截图,然后使用照片编辑程序将它们拼接在一起,但这很麻烦。 更不用说,使用固定位置元素时,操作会更加棘手了。

幸运的是,浏览器可以帮助我们解决这个问题。

Chrome

从 Chrome 59 开始,它已内置于 DevTools 中。 这里有一个 视频。 您使用“响应式设计模式”,然后在右上角菜单中选择全页面截图选项。

我发现使用命令提示符来完成它也很容易

Command-Shift-P 打开命令面板。

如果您需要“移动端”的全长截图,只需将响应式视图调整到您想要的大小并再次保存。 方便!

我也在 Chrome 中使用 Nimbus 扩展程序 取得了不错的效果。

Firefox

在 Firefox DevTools 中,您需要打开一个名为 捕获整个页面截图 的设置,该设置位于 可用工具箱按钮 下。 打开它,就会出现一个按钮。

Safari

在 Safari DevTools 中,选择一个节点,右键单击,您将在上下文菜单中看到 捕获截图

Safari 有 文件 > 导出为 PDF,但这很麻烦。 我不知道它是如何决定要导出什么,哪些不要导出,布局很奇怪,而且不知何故它被分成多个页面。

Awesome Screenshot 扩展程序似乎可以解决问题。

还有一些原生应用程序,例如 BrowseShotPaparazzi!