欢迎来到网聚网,在这里聚集着网络的经典荟萃,共享前沿情报信息。网聚网为你网络经典荟萃,聚焦时尚热点!

使用Chrome 内建工具制作网页长截图,撷取网站画面免安装下载外挂

几个月前介绍过「Firefox Screenshots」免费网页撷图工具,也是火狐浏览器Firefox内建的快速拍照、分享萤幕功能,在全新  Firefox Quantum  推出后成为内建功能之一,可见不单单只有工作上会用到,对于一般使用者来说网页撷图也是相当必要。现在Google Chrome也内建网页撷取工具以及将完整页面保存下来的「网页长截图」制作功能,不用额外下载、安装外挂或扩充功能,只要输入指令就能做到。

使用Chrome 内建工具制作网页长截图教学,撷取网站画面免安装下载外挂

而我平时的使用经验是透过撷图工具来抓取我需要的范围,我在「如何写出一篇文章?每日必用的写作相关软体汇整」就曾提及WinSnap,后来换成以Mac做为主要工作环境后就改为使用Jing,或许是因为我必须要撷取一些网路服务、应用程式或软体画面,我还是习惯以工具来抓取我需要的范围,而且在尺寸大小上也比较容易控制。

回到本篇主题,要如何使用Google Chrome内建的功能进行网页画面撷取、备份呢?接下来我会以图文简单教学,其实只要记住快速键组合,就能以输入指令方式来制作截图,当然还包括很多工具可能都无法做的网页「长截图」,也就是把网页从头到尾完整撷取为图片,都可利用内建功能办到,非常实用。

使用教学

STEP 1

首先,将你的Google Chrome浏览器更新、升级到59或更高版本,在我写这篇文章时的版本为63,接着以快捷键F12(Mac为  ⌘Command + ⌥Option + I)开启开发人员工具功能,如下图会出现许多网页开发者需要的相关工具。

使用Chrome 内建工具制作网页长截图

STEP 2

开启「开发人员工具」后随即按下Ctrl + Shift + P(Mac为  ⌘Command + ⇧Shift + P),会出现可输入指令列的工具,输入「Capture full size screenshot」(只要前几个字应该就会自动搜寻并跳出该指令),按下Enter后Google Chrome就会自动撷取整个网页从头到尾的内容,直接输出为图片并下载保存。

使用Chrome 内建工具制作网页长截图

STEP 3

下图就是我以Chrome 内建撷取完整尺寸截图所制作的图片范例,因为是以浏览器内建渲染引擎直接输出,速度很快,效果也很好!尤其是解析度和精致程度都很高。

使用Chrome 内建工具制作网页长截图

STEP 4

如果你想撷取网页在行动装置例如手机的画面截图,可透过快速键Ctrl + Shift + M(Mac为  ⌘Command + ⇧Shift + M)来开启模拟工具,切换iPhone、iPad、Nexus、Galaxy等装置开启网页的显示情形,再搭配前面介绍的撷图功能抓取网页在手机显示的画面截图。

使用Chrome 内建工具制作网页长截图

下图就是我抓取的网页截图,也是免费资源网路社群在iPhone 8 Plus开启的情形,因为使用响应式网页设计(Responsive web design,RWD),当装置宽度不够时会自动隐藏侧边栏,同时将整体版型缩小到可容得下画面,避免因为萤幕太小而在浏览时出现版型跑掉或必须滑动才能浏览内容等不便情形。有些网站会另外提供行动板网页,这都是比较常见的解决方案。

使用Chrome 内建工具制作网页长截图

STEP 5

最后,再介绍一个小功能,可以撷取网页中你选择的元件,如果有使用过Google Chrome内建的开发人员工具就知道,有个功能可以选取网页内容,然后显示出该段落程式码、CSS及相关资讯,只要按下Ctrl + Shift + C(Mac为  ⌘Command + ⇧Shift + C)就能开启。

选择你要抓取的网页部分,输入「Capture node screenshot」指令就能撷取转为图片。

使用Chrome 内建工具制作网页长截图

值得一试的三个理由:

  1. 直接以Google Chrome 内建工具进行网页撷图

  2. 不用额外下载、安装外挂,撷取效果好,速度快

  3. 可制作网页长截图,也能撷取行动装置画面

标签: Google Chrome
分类:麻辣头条| 发布:yalebobo| 查看:593 | 发表时间:2017-12-17
原创文章如转载,请注明:转载自网聚网 https://www.yalebobo.com/
本文链接:https://www.yalebobo.com/?id=353

已经有 ( 0 ) 位网友发表了评论,你也评一评吧!  

Design By XvDesign.Com | Login | Power By Z-BlogPHP 1.5.2 Zero