一、前言

我们平时在浏览网页时,想把碰到好的网页内容或者文章截屏保存,但是网页的长度常常会超出屏幕高度,一般的截屏功能只能截取显示在屏幕上的内容,那我们该如何方便快捷截取全部内容?今天就分享一个如何利用Chrome浏览器在不安装第三方软件的情况下直接截取网页的方法。

二、如何利用Chrome浏览器截屏

1、选择Chrome浏览器,打开需要截图的网页;

2、页面加载完成后,按下快捷键组合 Ctrl+Shift+I(Windows)/F12 或者 Alt+Command+I(Mac)调出开发者工具,具体如下图所示:

3、开发者工具中,按下快捷键组合Ctrl+Shift +P(Windows) 或 Command+Shift+P(Mac)来打开命令行,具体如下图所示:

4、在命令行中输入"Screen",可以看到三个选项,根据不同需求进行选择,具体如下图所示:

◆ 整个网页:Capture full size screenshot

◆ 节点网页:Capture node screenshot

◆ 当前屏幕:Capture screenshot

三、应用

1、截取整个网页的内容,进行截屏(Capture full size screenshot)

2、选择需要的元素节点,进行截屏(Capture node screenshot)

3、根据当前当前屏幕的大小,进行截屏(Capture screenshot)

四、总结

如果你想在网页中截取手机的画面截,可通过快速键 Ctrl + Shift + M(Mac为 Command + Shift + M)来开启模拟工具,切换 iPhone、iPad、Nexus、Galaxy 等装置开启网页的显示情形,再根据上面介绍的截图功能抓取网页在手机显示的画面截图,具体如图所示:

利用Chrome浏览的开发者工具,完美实现网页全屏截图,不需要安装任何插件,大家快来试试吧。

① Ctrl+Shift+I(F12)

② Ctrl+Shift+P

③ 输入"Screen"

④ 选择不用的方式截取:

▶ 整个网页(Capture full size screenshot

▶ 节点网页(Capture node screenshot

▶ 当前屏幕(Capture screenshot

Chrome浏览器如何完美实现滚动截图技巧的更多相关文章

  1. Chrome 浏览器如何完美实现滚动截图技巧

    一.前言 我们平时在浏览网页时,想把碰到好的网页内容或者文章截屏保存,但是网页的长度常常会超出屏幕高度,一般的截屏功能只能截取显示在屏幕上的内容,那我们该如何方便快捷截取全部内容?今天就分享一个如何利 ...

  2. 5个提升Google Chrome浏览器运行速度的技巧

    尽管有无数个喜欢Google Chrome  浏览器的理由,其中就包括,Chrome已经够快了,但Google Chrome的内存占用而导致的速度拖累还是广受诟病,这种弊端在windows下尤为明显, ...

  3. chrome 浏览器的使用技巧

    前端工程师大部分的工作成果都需要在浏览器中查看,使用 chrome 浏览器的频率非常高.更好更优雅地使用 chrome,将 chrome 配置成一款趁手的浏览器,将极大地提升编程效率.本文将详细介绍 ...

  4. Chrome浏览器调试技巧

    本文主要讲解针对chrome浏览器的调试方案,对于其他浏览器其实大同小异. 先来入门一点的 DOM元素调试 看上图: 以上图表明的1,2,3,4,5标记说明: 1,为移动设备模拟器,chorme现在是 ...

  5. chrome浏览器使用技巧

    在学校的时候一直在用firefox火狐浏览器,听一个学长说使用chrome浏览器在面试的时候有加分,而且还跟我说了一些chrome浏览器的使用技巧,最后从火狐浏览器转到谷歌浏览器,就一直在使用谷歌浏览 ...

  6. Chrome浏览器界面截图

    常常出现这么一个场景: 网页比较长,需要滚动屏幕才能看完整.这时候如需截屏,则比较麻烦. 如下为解决方法: 推荐Chrome浏览器: 按F12打开调试页面,同时按下ctrl + shift + p, ...

  7. 第一期chrome浏览器的小技巧------《提高搜索效率》

    !!! 这次的技巧是:利用chrome提供的设置 提高你的搜索效率 !!! 我们经常遇到问题,搜索的时候很不方便 比如你在百度上搜索一个东西的时候正好没有搜到,那么你想找到这个东西的话,很明显要到其他 ...

  8. Ubuntu小技巧——怎样安装谷歌Chrome浏览器

    对于刚刚开始使用Ubuntu并想安装谷歌Chrome浏览器的新用户来说,本文所介绍的方法是最快捷的.在Ubuntu上安装谷歌Chrome的方法有很多.一些用户喜欢直接在谷歌Chrome下载页面获得 d ...

  9. 谷歌Chrome浏览器提示adobe flash player已过期完美解决办法

    最近使用谷歌Chrome浏览器提示adobe flash player已过期,浏览网页时一些flash元素的东西都无法正常显示,在网上尝试寻找很多方法,都不能解决,最后,经测试有效方法如下:一:下载最 ...

随机推荐

  1. Tornado之抽屉实战(3)--注册

    知识点应用:标签绑定事件,jQuery获取用户值-->AJAX发送数据-->后台路由系统-->业务逻辑处理-->ORM数据操作-->write返回-->AJAX回调 ...

  2. 刷题向》DP》值得一做》关于对DP问题的充分考虑(normal)

    在你辛苦调试一道DP题,遇到瓶颈的时候,你是否感到一股洪荒之力遏制住你的思想,使你给题库贡献了一倍的WA.RE.TLE量,却没有AC过一次? 在这时,你应该考虑的是砸电脑再次重新考虑整个题目,再应对自 ...

  3. 流Stream

    System.IO 提供了一个抽象类Stream , Stream类 支持对字节的读写操作.所谓的“流”,指的是Stream,也就是所谓的一个文件区.这个文件区中存储着的信息可以是在内存中,也可以是在 ...

  4. box-shadow 内阴影

    1.盒子阴影样式单词:box-shadow 2.语法 代表边框间距靠左0 靠上0 和1px阴影范围 阴影颜色为黑色(#000),有inset 代表框内阴影 ,不带inset 代表框外阴影. 注意:bo ...

  5. c语言实践 数字特征值

    这题的要求是这样的: 这题我没做出来,我大概思路是这样的,根据输入的数字,把这个数字的每一位都分离出来,然后判断奇数还是偶数,再判断序是奇数还是偶数,最后两个奇偶性比较,输出1还是0,这个输出的1和0 ...

  6. LIRE教程之源码分析 | LIRE Tutorial of Analysis of the Source Code

    LIRE教程之源码分析 |LIRE Tutorial of Analysis of the Source Code 最近在做地理图像识别和检索的研究,发现了一个很好用的框架LIRE,遂研究了一通.网上 ...

  7. OnExit事件 OnChange事件

    procedure TSetParkForm.edtPrePosExit(Sender: TObject); // 焦点移开 或已操作 begin if (G2.RowCount > 0) an ...

  8. 文字相对于 div 垂直居中

    通用方法 height  跟line-height div{ border: 1px solid black; text-align: left; height: 200px; line-height ...

  9. 阿里 vs. 腾讯,谁的收购更有眼光?

    近年来我们国内企业高速发展,各大集团纷纷收购其他公司发展自己,在这么多的集团收购里面尤其以阿里巴巴和腾讯的收购引人注目.在2014年里阿里巴巴先后投资了中信,美国奢侈品电子商务lstdibs,高德,优 ...

  10. ExposedObject的使用

    ExposedObject可以将一个对象快速封装未一个dynamic using System; namespace ConsoleApp2 { class Program { static void ...