在 Chrome 中捕获全尺寸网页滚动屏幕截图
目录:
Google Chrome 浏览器提供两种截取全尺寸网页屏幕截图的方法。这对于许多网络工作者来说可能是必要的或有用的,无论他们是开发人员、设计师、编辑、经理、作家、分析师,还是任何其他可能的基于网络的工作。
我们将介绍的使用 Chrome 捕获全尺寸网页屏幕截图的方法需要适用于任何桌面级设备(包括 Mac、Windows、Linux 和 Chromebook)的完整版本的 Chrome。不需要插件,因为我们将在 Chrome 中使用内置的开发人员工具。
ote 我们在这里介绍桌面版Chrome 浏览器。如果需要或喜欢,您还可以使用 Firefox、Mac 上的 Safari 以及 iPhone 和 iPad 上的 Safari 获取整页屏幕截图。
如何在Chrome中捕获全尺寸滚动屏幕截图
准备好在Chrome 中获取网页的全尺寸屏幕截图了吗?以下是该怎么做:
- 打开Chrome开发者工具(查看>开发者>开发者工具)
- 点击开发者工具抽屉中的响应式设计模式按钮
- 向下滚动整个网页,以便加载所有图像(这对于捕获延迟加载图像很重要,这是一种用于加速网页的常用技术)
- 点击响应式设计工具右上角竖直的三个点,选择“全尺寸截图”
- 完整尺寸的屏幕截图将出现在您的默认Chrome 下载文件夹中
在 Mac 上,您会在“用户下载”中找到网页的全尺寸屏幕截图,除非您手动更改了它。
捕获的屏幕截图的尺寸将根据您在响应模式下选择的设备而有所不同,例如,如果您选择了 iPad Air 并拍摄了 osxdaily.com 主页的全尺寸滚动屏幕截图,您的屏幕截图可能是大约 2084 × 16439 像素。很明显一个页面较长的样式还是
如果您不滚动整个网页,任何延迟加载的图像都不会被屏幕截图捕获,从而使整页屏幕截图不完整并且不能代表用户在页面上看到的内容。
通过控制台在Chrome中捕获全页截图
另一种在Chrome中截取整页屏幕截图的方法是使用开发者控制台的“运行”命令,然后键入“screenshot”,然后从出现的选项中选择“捕获全尺寸屏幕截图”。在执行此操作之前,请务必滚动浏览整个网页。
对于一些用户来说这可能是一个更好的选择,但对于那些不太熟悉命令行的人来说它有点复杂。
这些适用于 Chrome 的方法是否比适用于 Mac 的带有开发者工具的 Safari 中的方法更容易?或者在 Mac 上使用 Firefox 截取完整网页的超简单方法?或者使用 iPhone 或 iPad 截取整页屏幕截图的更简单方法?这由您决定,也可能取决于您最常使用的浏览器,以及您对每个浏览器的熟练程度。