当前位置: Chrome插件首页 > Chrome插件问答 > 怎样使用Chrome浏览器截取整个网页?

怎样使用Chrome浏览器截取整个网页?

Chrome插件问答
我们chrome插件网介绍过好几款chrome网页截图插件,因为不单单是我们工具中会用到,对于一般使用者来说网页截图也是相当必要。而笔者平时的使用经验是透过截图工具来抓取我需要的
我们chrome插件网介绍过好几款chrome网页截图插件,因为不单单是我们工具中会用到,对于一般使用者来说网页截图也是相当必要。而笔者平时的使用经验是透过截图工具来抓取我需要的范围,每天都要跟截图工具打交道。我还习惯以工具来抓取我需要的范围,而且在尺寸大小上也比较容易控制。首先我们来看看之前我们网站之前推荐十款可以对网站整页截图,全屏截图的chrome截图插件。而今天我们要教大家如何使用 Google Chrome 内建的功能进行网页画面截图、备份呢?接下来我会以图文简单教学,其实只要记住快速键组合,就能以输入指令方式来制作截图,当然还包括很多工具可能都无法做的网页长截图,也就是把网页从头到尾完整截取为图片,都可利用自带功能办到,非常实用。
怎样使用Chrome浏览器截取整个网页?
 
  1. 1、首先,将你的 Google Chrome 浏览器更新、升级到 59 或更高版本,在我写这篇文章时的版本为 63,接著以快捷键 F12 (Mac 为 ⌘Command + ⌥Option + I)开启开发人员工具功能,如下图会出现许多网页开发者需要的相关工具。
怎样使用 Chrome 浏览器截取整个网页
2、打开开发者工具后随即按下 Ctrl + Shift + P(Mac 为 ⌘Command + ⇧Shift + P),会出现可输入指令列的工具,输入「Capture full size screenshot」(只要前几个字应该就会自动搜寻并跳出该指令),按下 Enter 后 Google Chrome 就会自动截图整个网页从头到尾的内容,直接输出为图片并下载保存。
怎样使用Chrome浏览器截取整个网页?
 
3、下图就是我以 Chrome自带的截图功能截取完整尺寸截图的图片范例,因为是以浏览器自带的渲染引擎直接输出,速度很快,效果也很好!尤其是解析度和精致程度都很高。
 
怎样使用Chrome浏览器截取整个网页?
 
5、如果你想截图网页在行动装置例如手机的画面截图,可透过快速键 Ctrl + Shift + M(Mac 为 ⌘Command + ⇧Shift + M)来开启模拟工具,切换 iPhone、iPad、Nexus、Galaxy 等装置开启网页的显示情形,再搭配前面介绍的截图功能抓取网页在手机显示的画面截图。
怎样使用Chrome浏览器截取整个网页?
 
 
上图就是我抓取的网页截图 iPhone 8 Plus 开启的情形,因为使用响应式网页设计(Responsive web design,RWD),当装置宽度不够时会自动隐藏侧边栏,同时将整体版型缩小到可容得下画面,避免因为萤幕太小而在浏览时出现版型跑掉或必须滑动才能浏览内容等不便情形。有些网站会另外提供行动板网页,这都是比较常见的解决方案。
6、最后,再介绍一个小功能,可以截图网页中你选择的元件,如果有使用过 Google Chrome 自带的开发人员工具就知道,有个功能可以选取网页内容,然后显示出该段落程式码、CSS 及相关资讯,只要按下 Ctrl + Shift + C(Mac 为 ⌘Command + ⇧Shift + C)就能开启。选择你要抓取的网页部分,输入「Capture node screenshot」指令就能截图转为图片。
怎样使用Chrome浏览器截取整个网页?

最后还要唠叨一下,非开发人员我相信网页截图是许多人必定会用到的工具,之前也推荐过几个扩展功能:
 
2.浏览器网页截图插件FireShot:捕捉网页截图

相关文章推荐

 

相关内容推荐

FireShot - 浏览器网页截图插件

博客插件 2019-02-14 18:59:01

FireShot是一款chrome扩展插件,当然fireshot不仅仅支持chrome浏览器,还支持IE浏览器和Firefox浏览器,它可以对屏幕进行截屏,也可以将长网页保存为图片。FireShot可以使用谷歌浏览器快速捕

网页截图工具Blipshot :one click screenshots

办公插件 2017-03-07 20:59:27

。真正的快速和简单的一键全页面截图与拖放
Blipshot是一键截图扩展:只需点击该图标,页面截图将被创建:然后你可以拖放它不管你想要的。
为什么要浪费时间,如果你只是想

网页截图、截屏插件-Nimbus Screenshot

办公插件 2018-03-28 21:58:36

捕获网页,它或部分整个浏览器窗口,编辑截图并保存图像,本地文件或雨云注意
捕捉整个网页(截图工具),它的一部分或者整个浏览器窗口,编辑在一个非常友好的用户界面屏幕

Awesome Screenshot Minus

办公插件 2019-02-15 13:24:33

这个扩展程序的创建是因为我喜欢Diigo最初的Awesome Screenshot扩展程序,但不能相信它不会把我卖掉。它现在已从网上商店中删除,据报道是因为用户隐私侵犯 - 一切都是真的。我发现里面

Awesome Screenshot - 网页截图、注释&批注

博客插件 2019-02-15 13:23:23

Awesome screenshot是一款针对谷歌浏览器所推出的辅助chrome浏览器插件。这款谷歌览器截图插件功能强大,是chrome用户一个非常实用的截屏扩展软件,同时截屏之后还可以直接对图片进行一

怎样使用Chrome浏览器截取整个网页?

Chrome插件百科 2018-03-02 12:03:18

我们chrome插件网介绍过好几款chrome网页截图插件,因为不单单是我们工具中会用到,对于一般使用者来说网页截图也是相当必要。而笔者平时的使用经验是透过截图工具来抓取我需要的

高效网页截图编辑插件 v9.4.4

办公插件 2019-08-28 12:36:13

• Quick and clean interface
• Much safer than the rest. NO permissions required! Try installing other screenshot extensions and read their install permissions ...they are crazy! Every other extens

Screencastify:chrome录屏插件

办公插件 2018-03-28 21:33:16

Screencastify是一个简单的视频屏幕捕捉软件的浏览器。Screencastify是一个简单的视频屏幕捕捉软件(亦称截屏记录)的浏览器。它能够记录片,包括音频中的所有屏幕活动。只需按下录制和

chrome开发者工具实现整站截屏

聚合专题 2018-08-30 11:44:32

我们经常要遇到将整个网站作为图片保存下来的情况,而windows系统自带的PrintScreen键只能保存当前屏幕的截图 在chrome浏览器中可以安装第三方的截图插件实现整站截图 今天我们要介绍