在Chrome浏览器中捕获全尺寸网页滚动屏幕截图

在Chrome浏览器中捕获全尺寸网页滚动屏幕截图

Google Chrome 浏览器提供了两种截取全尺寸网页截图的方法。对于许多网络工作者来说,这可能是必要的或有用的,无论他们是开发人员、设计师、编辑、经理、作家、分析师,还是任何其他可能的基于网络的工作。

我们将介绍使用 Chrome 捕获全尺寸网页屏幕截图的方法需要适用于任何桌面级设备(包括 Mac、Windows、Linux 和 Chromebook)的完整版 Chrome。不需要插件,因为我们将在 Chrome 中使用内置的开发人员工具。

请注意,我们在这里介绍的是桌面版 Chrome 浏览器。如果您需要或喜欢,您还可以使用Firefox、Mac 上的Safari 以及 iPhone 和 iPad上的 Safari截取整页屏幕截图。

如何在 Chrome 中捕获全尺寸滚动屏幕截图

准备好在 Chrome 中截取网页的全尺寸屏幕截图了吗?这是做什么:

    1. 打开 Chrome 开发者工具(查看 > 开发者 > 开发者工具)

在Chrome浏览器中捕获全尺寸网页滚动屏幕截图

    1. 单击开发人员工具抽屉中的响应式设计模式按钮

在Chrome浏览器中捕获全尺寸网页滚动屏幕截图

    1. 向下滚动整个网页,以便加载所有图像(这对于捕获延迟加载图像很重要,这是一种用于加速网页的常用技术)*
    2. 单击响应式设计工具右上角的三个垂直点,然后选择“捕获全尺寸屏幕截图”

在Chrome浏览器中捕获全尺寸网页滚动屏幕截图

  1. 完整尺寸的屏幕截图将显示在您的默认 Chrome 下载文件夹中

在 Mac 上,您会在用户下载中找到该网页的全尺寸屏幕截图,除非您手动更改了它。

捕获的屏幕截图的尺寸将根据您在响应模式下选择的设备而有所不同,例如,如果您选择 iPad Air 并拍摄 osxdaily.com 主页的全尺寸滚动屏幕截图,您的屏幕截图可能约为 2084 × 16439 像素。显然较长的页面样式或

*如果您不滚动浏览整个网页,则任何延迟加载的图像都不会被屏幕截图捕获,从而使整个页面的屏幕截图不完整,并且不能代表用户在页面上看到的内容。

通过控制台在 Chrome 中捕获整页屏幕截图

在 Chrome 中截取整页屏幕截图的另一种方法是使用开发者控制台的“运行”命令,然后键入“截屏”,然后从出现的选项中选择“截取全尺寸屏幕截图”。在执行此操作之前,请务必滚动浏览整个网页。

在Chrome浏览器中捕获全尺寸网页滚动屏幕截图

对于某些用户来说,这可能是一个更好的选择,但对于那些不太熟悉命令行的人来说,它有点复杂。

Chrome 的这些方法是否比 Safari for Mac 中的开发者工具更容易?还是在Mac 上使用 Firefox 截取完整网页截图的超级简单方法?或者更简单的方法是使用 iPhone 或 iPad 截取整页屏幕截图?这由您来决定,而且还可能取决于您最常使用的浏览器,以及您对每个浏览器的熟练程度。

本站所有文章资讯、展示的图片素材等内容均为注册用户上传(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考。 用户通过本站上传、发布的任何内容的知识产权归属用户或原始著作权人所有。如有侵犯您的版权,请联系我们反馈本站将在三个工作日内改正。
(0)
上一篇 2022年9月22日 上午11:04
下一篇 2022年9月22日 下午12:20

相关推荐