《转载》使用Chrome浏览器截取整个网页

chrome插件网介绍过好几款chrome网页截图插件，因为不单单是我们工具中会用到，对于一般使用者来说网页截图也是相当必要。而笔者平时的使用经验是透过截图工具来抓取我需要的范围，每天都要跟截图工具打交道。我还习惯以工具来抓取我需要的范围，而且在尺寸大小上也比较容易控制。首先我们来看看之前我们网站之前推荐十款可以对网站整页截图，全屏截图的chrome截图插件。而今天我们要教大家如何使用 Google Chrome 内建的功能进行网页画面截图、备份呢？接下来我会以图文简单教学，其实只要记住快速键组合，就能以输入指令方式来制作截图，当然还包括很多工具可能都无法做的网页长截图，也就是把网页从头到尾完整截取为图片，都可利用自带功能办到，非常实用。

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

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

3、下图就是我以 Chrome自带的截图功能截取完整尺寸截图的图片范例，因为是以浏览器自带的渲染引擎直接输出，速度很快，效果也很好！尤其是解析度和精致程度都很高。

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

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

6、最后，再介绍一个小功能，可以截图网页中你选择的元件，如果有使用过 Google Chrome 自带的开发人员工具就知道，有个功能可以选取网页内容，然后显示出该段落程式码、CSS 及相关资讯，只要按下 Ctrl + Shift + C（Mac 为 ⌘Command + ⇧Shift + C）就能开启。选择你要抓取的网页部分，输入「Capture node screenshot」指令就能截图转为图片。

最后还要唠叨一下，非开发人员我相信网页截图是许多人必定会用到的工具，之前也推荐过几个扩展功能：

1.全屏幕截取网页编辑共享神器-Awesome Screenshot

2.浏览器网页截图插件FireShot：捕捉网页截图

3.将网页完整截取备份成图片的扩展：Full Page Screen Capture

4.qSnap 浏览器抓图工具，一键快速把网页转为图片、产生分享链接

http://www.cnplugins.com/tool/chrome-screenshot.html

转载于:https://www.cnblogs.com/sdushmily/p/10272615.html

《转载》使用Chrome浏览器截取整个网页相关推荐

怎样使用Chrome浏览器截取整个网页?
方法1: 我们chrome插件网介绍过好几款chrome网页截图插件,因为不单单是我们工具中会用到,对于一般使用者来说网页截图也是相当必要.而笔者平时的使用经验是透过截图工具来抓取我需要的我们chr ...
Chrome浏览器截取整个网页方法
快捷键f12,打开浏览器控制台: 快捷键:Ctrl + Shift + P,打开指令列工具:(mac电脑快捷键是Command + Shift + P) 3. 搜索框输入 full 关键字,回车即可下 ...
Chrome浏览器截取网页生成图片
通过Chrome浏览器截取整个网页的方法有很多,例如: 1. F12或者Ctrl+Shift+I打开开发者工具,再在任意Tab上按Ctrl+Shift+P,再在弹出的输入框中输入full size s ...
HTML谷歌怎么加背景音乐,谷歌Chrome浏览器怎么提取网页的背景音乐?
谷歌Chrome浏览器怎么提取网页的背景音乐?授人以鱼不如授人以渔,看到网友LYF在论坛某网站首页的网页背景音乐,热心网友Q1628393554真心可爱,将具体操作方法分享了出来,这是帮了我的大忙,可 ...
Chrome 浏览器清除单张网页缓存
Chrome 浏览器清除单张网页缓存的方法: 打开该网页打开开发者工具长按"重新加载"按钮,直至出现一个菜单选择"清空缓存并硬性重新加载"
chrome浏览器访问https网页提示不是私密连接，点击高级没有继续访问按钮提示该怎么办？
chrome浏览器访问https网页提示不是私密连接,点击高级没有继续访问按钮提示该怎么办? 不要慌~ 直接在该页面输入 thisisunsafe 就可以了
最新版本的Google Chrome浏览器如何设置网页编码？
前言:由于使用频率较低,以及促进网页编码规范,Google Chrome浏览器在55这个版本以后删除了手动设置网站编码的功能.但是对于部分没有设置编码或编码设置不正确的网站,新版Google Chro ...
Chrome浏览器怎么调试网页标题字体大小和颜色？
出于兴趣了解了一下,在此记录一下,可以供web开发初学者看看哦! Chrome因为其十分好用的DevTools受广大开发者的喜好,下面一步一步教大家怎么用Chrome调试网页标题的和字体大小和颜色. ...
Chrome浏览器截取全屏（无需安装任何插件）
Mac系统操作,截取整个网页,方法如下: (1)在待截取网页鼠标右键,点击"检查". (2)按"shift+command+p"组合健,如下图所示: (3)输入 ...

《转载》使用Chrome浏览器截取整个网页

《转载》使用Chrome浏览器截取整个网页相关推荐

最新文章

热门文章