Chrome 开发者工具自带截图命令,轻松截取复杂网页

Lunvps
pENeBMn.png

之前试用 Firefox Quantum 时,我最喜欢的功能之一就是其内置的截图功能,它不仅能自动检测网页元素的边界,还能轻松保存整个网页,非常方便。

后来因为扩展和习惯的原因,我又换回了 Chrome,但还是很怀念这个功能。虽然商店里有很多截图增强扩展,但在截取一些比较复杂的网页时,元素经常会错位、重复。经过一番探索,我发现 Chrome 开发者工具其实内置了截图命令,而且效果也令人满意。这里分享给大家。

要使用截图功能,首先需要确保 Chrome 已升级到 59 或更高版本。在要截图的网页上,首先按 ⌘Command + ⌥Option + I(Windows 上为 F12)快捷键调出调试界面。

然后按下 ⌘Command + ⇧Shift + P(Windows 为 Ctrl + Shift + P),输入命令 Capture full size screenshot(只需输入前几个字母即可找到),按回车,Chrome 就会自动截取整个网页内容并保存到本地。因为是直接由渲染引擎输出,所以比普通的扩展程序速度更快,分辨率也更高。

除了普通的长截图外,你还可以使用此功能截取移动网页的长截图。只需按 ⌘ Command + ⇧ Shift + M(Windows 为 Ctrl + Shift + M)即可模拟移动设备,然后像以前一样运行命令。在顶部的工具栏中,你可以选择要模拟的设备以及分辨率和其他设置。

如果要截取网页的某个特定部分,可以按 ⌘ Command + ⇧ Shift + C(Windows 上为 Ctrl + Shift + C)来嗅探元素。选择所需部分后,运行 Capture node screenshot 命令,完美选择的截图就诞生了。

此外,Capture screenshot 命令允许你截取当前网页的可见部分。我会继续探索 Chrome 开发者工具的其他有趣用途,并推荐给大家。

pENeBMn.png
文章版权声明:除非注明,否则均为论主机评测网原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

  • 后端架构是指构建和维护服务器端应用程序的整体结构和设计。它涉及到多个方面,包括技术选型、系统设计、数据库设计、缓存策略、安全性等。以下是一个典型的后端架构的概述
  • 前端框架是用于构建用户界面的软件框架,它提供了一套预定义的代码结构和工具,帮助开发者更高效地创建复杂的Web应用程序。以下是一些流行的前端框架
  • Linux在线系统网站可能指的是可以在线使用或体验Linux系统的网站,或者提供Linux相关教程和资源的网站。以下是一些与Linux相关的在线资源和网站
  • Linux系统是一种自由和开放源码的操作系统,它可以在多种计算机硬件平台上运行,包括桌面计算机、服务器、智能手机、路由器等。因此,Linux系统并不特定于某种电脑,而是可以安装在各种不同类型的电脑上。
  • Linux系统并不是由某个特定的国家开发的,而是由全球各地的开发者和社区共同贡献和开发的。
  • Linux系统是一个基于Unix的操作系统,它本身不是一个命令,而是一个由许多命令和工具组成的操作系统环境。在Linux系统中,用户可以通过终端(命令行界面)输入各种命令来执行不同的操作。
  • 阿里巴巴与Linux之间有着紧密的联系。阿里巴巴是中国最大的电商平台之一,而Linux是一款自由和开放源代码的操作系统。阿里巴巴在其技术栈中广泛使用了Linux,以支持其庞大的业务需求和数据处理能力。
  • Linux系统本身并没有专门的手机版可供下载,但你可以通过一些方法在手机上运行Linux系统。以下是一些常见的方法
  • pENeBMn.png

    目录[+]