一、前言

我们平时在浏览网页时，想把碰到好的网页内容或者文章截屏保存，但是网页的长度常常会超出屏幕高度，一般的截屏功能只能截取显示在屏幕上的内容，那我们该如何方便快捷截取全部内容？今天就分享一个如何利用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. 201671010140. 2016-2017-2 《Java程序设计》java学习第三周

    java学习第三周       不知不觉,学习java已经是第三周了,不同于初见时的无措,慌张,在接触一段时日后,渐渐熟悉了一些,了解到了它的便利之处,也体会到了它的一些难点,本周主攻第四章,< ...

  2. module 'keras.engine.topology' has no attribute 'load_weights_from_hdf5_group_by_name'

    参考: https://blog.csdn.net/heiheiya/article/details/81111932 https://blog.csdn.net/c20081052/article/ ...

  3. Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.38/images/json: dial unix /var/run/docker.sock: conne

    使用docker报如下错误信息: Got permission denied while trying to connect to the Docker daemon socket at unix:/ ...

  4. oracle高级查询练习题

    1.  列出员工表中每个部门的员工数和部门编号 Select deptno,count(*) from emp group by deptno; 补充1:列出员工表中,员工人数大于3的部门编号和员工人 ...

  5. chrome浏览器-Toolbar工具条不显示

    来源于<sencha touch 权威指南> ------------------------------------ 工具条按钮在chrome下不显示,不知是不支持还是代码有问题.app ...

  6. 认识HttpContext.User

    HttpContext.User,即IPrincipal .net源代码 namespace System.Security.Principal { /// <summary>Define ...

  7. （转）自制AutoMapper实现DTO到持久层Entity的转换

    原文地址:http://www.cnblogs.com/qidian10/p/3173907.html 项目中经常涉及到页面DTO更新,保存到数据库的操作,这就必然牵扯到DTO和持久层对象的转换,常见 ...

  8. 编写高质量代码改善C#程序的157个建议——建议39：了解委托的实质

    建议39:了解委托的实质 理解C#中的委托需要把握两个要点: 1)委托是方法指针. 2)委托是一个类,当对其进行实例化的时候,要将引用方法作为它的构造方法的参数. 设想这样一个场景:在点对点文件传输过 ...

  9. word 2013如何从某一页开始插入页码

    把光标移入要插入页面的最前面 插入分页符 在要插入页码的页脚双击打开页脚设计 取消页脚和前面页眉的链接 插入页码

  10. 最全面的jackson json 技术

    http://www.360doc.com/content/12/0429/09/7656232_207428466.shtml