如何用Chrome自带的截屏功能截取超过一个屏幕的网页
提升程序员工作效率的工具/技巧推荐系列
- 推荐一个功能强大的文件搜索工具SearchMyFiles
- 介绍一个好用的免费流程图和UML绘制软件-Diagram Designer
- 介绍Windows任务管理器的替代者-Process Explorer
- 介绍一个强大的磁盘空间检测工具Space Sniffer
- 如何在电脑上比较两个相似文件的差异
- 程序员工作效率提升系列-推荐一个JSON文件查看和修改的小工具
- 将Chrome调试器里的JavaScript变量保存成本地JSON文件
- 分享一个开源的JavaScript统计图表库,40行代码实现专业统计图表
- 推荐一个短小精悍的Chrome缓存管理工具-ChromeCacheView
- 给程序员的福利-分享一个将代码转换成图片的在线网站
前端开发人员经常需要将当前的网页截图发给产品经理讨论。如果网页很长,一个屏幕显示不下,那么操作系统自带的截图功能就没有办法截取整个屏幕了。
最近我找到一个办法,通过Chrome开发者工具自带的截图功能可以截取超过一个屏幕的完整网页视图。
下面分享给大家。
打开要截取完整屏幕的网页,打开Chrome开发者工具,按住快捷键Ctrl+Shift+P,会看到很多可用命令,
在命令提示符里输入“full”,会看到只有一个可用选项:Capture full size screenshot:
点击这个命令,Chrome就自动截取当前网页的完整图片,并且提示我们另存到本地。
大家可以看看这个效果:
是不是非常方便?大家从Chrome开发者工具的命令行里还能发现很多其他有用的功能,比如只截取网页上指定元素。
假设我想只截取bing搜索结果页面里id为b_content的元素对应的内容,
在命令里选择Capture node screenshot即可:
下图就是只截取b_content元素对应的截图结果:
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
如何用Chrome自带的截屏功能截取超过一个屏幕的网页的更多相关文章
- Windows 自带的截屏功能
有时没登陆QQ,又急需截图,系统自带的截图功能就可以派上用场了. 1.按下键盘上的Print Screen 按钮 2.打开系统自带的画图工具,点击粘贴就可以了.
- Android自己定义截屏功能,相似QQ截屏
由于公司业务需求 须要对一个屏幕进行截屏.但自带的截屏功能是远远不够项目的功能需求 ,我们是做一个画板软件 .须要的像QQ那样截屏之后 ,能够看到我们自己定义的工具.有画笔,button等等 .and ...
- c# wpf 利用截屏键实现截屏功能
原文:c# wpf 利用截屏键实现截屏功能 最近做一个wpf程序需要截图功能,查找资料费了一些曲折,跟大家分享一下. 先是找到了这样一份代码: static class Scr ...
- PhantomJS linux系统下安装步骤及使用方法(网页截屏功能)
PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...
- android4.3 截屏功能的尝试与失败分析
1.背景 上一篇讲了在源码中捕获到了android手机的截屏函数(同时按下电源键与音量减,详情http://blog.csdn.net/buptgshengod/article/details/199 ...
- 【玩转cocos2d-x之三十九】Cocos2d-x 3.0截屏功能集成
3.0的截屏和2.x的截屏基本上同样.都是利用RenderTexture来处理,在渲染之前调用call函数,然后调用Cocos的场景visit函数对其进行渲染,渲染结束后调用end函数就可以.仅仅是3 ...
- [置顶] Android 应用内禁止截屏功能的实现
截图介绍 Android的调试工具DDMS提供有截屏功能,很多软件也会有截屏功能,在做支付等安全类应用的时候,为了保证用户的资产和系统安全,往往会禁止应用内截屏,禁止之后,在此应用处于前台的情况下 ...
- Atitit截屏功能的设计解决方案
Atitit截屏功能的设计解决方案 自己实现.... 使用快捷键.. 弹出自己的win,,背景是屏幕快照 点击鼠标光标变成十字状态 出现截屏窗口调整截屏窗口位置与大小 释放鼠标,三个btn,, 复制 ...
- iOS截屏功能
代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. // ...
随机推荐
- hadoop源码剖析--$HADOOP_HOME/bin/hadoop脚本文件分析
1. $HADOOP_HOME/bin/ hadoop #!/usr/bin/env bash# Licensed to the Apache Software Foundation (ASF) un ...
- 【BZOJ 2818】 GCD
[题目链接] 点击打开链接 [算法] 线性筛出不大于N的所有素数,枚举gcd(x,y)(设为p),问题转化为求(x,y)=p的个数 设x=x'p, y=y'p,那么有(x,y)=1且 ...
- 【NOIP2017 DAY1T2】 时间复杂度
[题目链接] 点击打开链接 [算法] 其实这就是一道模拟题啦! 在判error和计算时间复杂度时,我们需要用栈这种数据结构 [代码] 这题的代码还是有些难写的,写的时候一定要有条理! #include ...
- C++初学(1) 简单的加减乘除取余运算代码
//---------------+-*/%算法---------------------------------------------------------- #include <iost ...
- Lua变量
Lua 变量 变量在使用前,必须在代码中进行声明,即创建该变量. 编译程序执行代码之前编译器需要知道如何给语句变量开辟存储区,用于存储变量的值. Lua 变量有三种类型:全局变量.局部变量.表中的域. ...
- Jquery之each函数详解
最近项目被each函数坑惨了,想来还是好好整理下关于each函数的方方面面,一来方便自己查阅,二来为读者提供经验和教训,废话不多说,来看看Each函数到底是怎么坑人的. 一. 全局jQuery.eac ...
- ObjectARX学习笔记
http://blog.csdn.net/jangdong/article/category/1642265/3 http://blog.csdn.net/u011331383/article/cat ...
- (5)Javascript的表达式
Javascript的表达式 表达式是一个语句的集合,计算结果是个单一值,然后该结果被javascript归入下列数据类型之一:布尔.数字.字符串.对象等.表达式是具有一定的值,用操作符把常量和变量连 ...
- Docker镜像文件操作
1什么是Docker镜像 Docker镜像是由文件系统叠加而成(是一种文件的存储形式).最底端是一个文件引导系统,即bootfs,这很像典型的Linux/Unix的引导文件系统.Docker用户几乎永 ...
- ubuntu 18 安装virtulenv以及virtualenvwrapper
转自: https://www.jianshu.com/p/06533f19c4ad 首先安装pip,如果用的python3版本要安装pip3(自行google) sudo apt install v ...