Chrome浏览器如何完美实现滚动截图技巧
一、前言
我们平时在浏览网页时,想把碰到好的网页内容或者文章截屏保存,但是网页的长度常常会超出屏幕高度,一般的截屏功能只能截取显示在屏幕上的内容,那我们该如何方便快捷截取全部内容?今天就分享一个如何利用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浏览器如何完美实现滚动截图技巧的更多相关文章
- Chrome 浏览器如何完美实现滚动截图技巧
一.前言 我们平时在浏览网页时,想把碰到好的网页内容或者文章截屏保存,但是网页的长度常常会超出屏幕高度,一般的截屏功能只能截取显示在屏幕上的内容,那我们该如何方便快捷截取全部内容?今天就分享一个如何利 ...
- 5个提升Google Chrome浏览器运行速度的技巧
尽管有无数个喜欢Google Chrome 浏览器的理由,其中就包括,Chrome已经够快了,但Google Chrome的内存占用而导致的速度拖累还是广受诟病,这种弊端在windows下尤为明显, ...
- chrome 浏览器的使用技巧
前端工程师大部分的工作成果都需要在浏览器中查看,使用 chrome 浏览器的频率非常高.更好更优雅地使用 chrome,将 chrome 配置成一款趁手的浏览器,将极大地提升编程效率.本文将详细介绍 ...
- Chrome浏览器调试技巧
本文主要讲解针对chrome浏览器的调试方案,对于其他浏览器其实大同小异. 先来入门一点的 DOM元素调试 看上图: 以上图表明的1,2,3,4,5标记说明: 1,为移动设备模拟器,chorme现在是 ...
- chrome浏览器使用技巧
在学校的时候一直在用firefox火狐浏览器,听一个学长说使用chrome浏览器在面试的时候有加分,而且还跟我说了一些chrome浏览器的使用技巧,最后从火狐浏览器转到谷歌浏览器,就一直在使用谷歌浏览 ...
- Chrome浏览器界面截图
常常出现这么一个场景: 网页比较长,需要滚动屏幕才能看完整.这时候如需截屏,则比较麻烦. 如下为解决方法: 推荐Chrome浏览器: 按F12打开调试页面,同时按下ctrl + shift + p, ...
- 第一期chrome浏览器的小技巧------《提高搜索效率》
!!! 这次的技巧是:利用chrome提供的设置 提高你的搜索效率 !!! 我们经常遇到问题,搜索的时候很不方便 比如你在百度上搜索一个东西的时候正好没有搜到,那么你想找到这个东西的话,很明显要到其他 ...
- Ubuntu小技巧——怎样安装谷歌Chrome浏览器
对于刚刚开始使用Ubuntu并想安装谷歌Chrome浏览器的新用户来说,本文所介绍的方法是最快捷的.在Ubuntu上安装谷歌Chrome的方法有很多.一些用户喜欢直接在谷歌Chrome下载页面获得 d ...
- 谷歌Chrome浏览器提示adobe flash player已过期完美解决办法
最近使用谷歌Chrome浏览器提示adobe flash player已过期,浏览网页时一些flash元素的东西都无法正常显示,在网上尝试寻找很多方法,都不能解决,最后,经测试有效方法如下:一:下载最 ...
随机推荐
- wdcp挂载数据盘为WWW以及之后出现的各种问题解决方法
昨天晚上突然有客户反映服务器访问不了,经检查后是因为磁盘满了! 购买阿里云的ECS选择linux系统的时候会赠送20G的系统盘,通常来讲自己用的话基本够了,但是我们作为网络公司,安装了一个WDCP后给 ...
- https抓包
- Python字符编码详解,str,bytes
什么是明文 “明文”是可以是文本,音乐,可以编码成mp3文件.明文可以是图像的,可以编码为gif.png或jpg文件.明文是电影的,可以编码成wmv文件.不一而足. 什么是编码?把明文变成计算机语言 ...
- UIWebView分页显示
問題:使用iOS UIWebView時,載入本地html檔案,但是該檔案太大,結果螢幕畫面形成一長條型顯示,雖然用滾動畫面可以看見整個html檔案,但是滑來滑去,不好用. 目標:用UIWebView載 ...
- 编写高质量代码改善C#程序的157个建议——建议33:避免在泛型类型中声明静态成员
建议33:避免在泛型类型中声明静态成员 在上一建议中,已经理解了应该将MyList<int>和MyList<string>视作两个完全不同的类型,所以,不应该将MyList&l ...
- 对于网站,APP开发流程的理解
• 明确产品目标用户,目标市场 • 明确将要开发的产品面世后是要解决什么样的问题 • 梳理产品有哪些功能点,功能点如何按照模块划分 • 站在用户角度思考用户怎样使用这款产品,以故事的情景讲述用户如何使 ...
- C#中Winform程序中如何实现多维表头【不通过第三方报表程序】
问题:C#中Winform程序中如何实现多维表头. 在网上搜了很多方法,大多数方法对于我这种新手,看的都不是很懂.最后在新浪博客看到了一篇比较易懂的文章:[DataGridView二维表头与合并单元格 ...
- Glide4.0使用
导入 dependencies { compile 'com.github.bumptech.glide:glide:4.0.0' compile 'com.android.support:suppo ...
- 使用Jenkins远程部署war包到tomcat container
Jenkins首先使用maven将源代码进行编译打包,之后需要将war包传送到tomcat服务器上进行部署. 来看一下Jenkins的基本配置,首先需要安装插件"Deploy to cont ...
- Lucene的基本概念----转载yufenfei的文章
Lucene的基本概念 Lucene是什么? Lucene是一款高性能.可扩展的信息检索工具库.信息检索是指文档搜索.文档内信息搜索或者文档相关的元数据搜索等操作. 信息检索流程如下: 1. 将即将检 ...