提升程序员工作效率的工具/技巧推荐系列

  1. 推荐一个功能强大的文件搜索工具SearchMyFiles
  2. 介绍一个好用的免费流程图和UML绘制软件-Diagram Designer
  3. 介绍Windows任务管理器的替代者-Process Explorer
  4. 介绍一个强大的磁盘空间检测工具Space Sniffer
  5. 如何在电脑上比较两个相似文件的差异
  6. 程序员工作效率提升系列-推荐一个JSON文件查看和修改的小工具
  7. 将Chrome调试器里的JavaScript变量保存成本地JSON文件
  8. 分享一个开源的JavaScript统计图表库，40行代码实现专业统计图表
  9. 推荐一个短小精悍的Chrome缓存管理工具-ChromeCacheView
  10. 给程序员的福利-分享一个将代码转换成图片的在线网站

前端开发人员经常需要将当前的网页截图发给产品经理讨论。如果网页很长，一个屏幕显示不下，那么操作系统自带的截图功能就没有办法截取整个屏幕了。

最近我找到一个办法，通过Chrome开发者工具自带的截图功能可以截取超过一个屏幕的完整网页视图。

下面分享给大家。

打开要截取完整屏幕的网页，打开Chrome开发者工具，按住快捷键Ctrl+Shift+P，会看到很多可用命令，

在命令提示符里输入“full”，会看到只有一个可用选项：Capture full size screenshot：

点击这个命令，Chrome就自动截取当前网页的完整图片，并且提示我们另存到本地。

大家可以看看这个效果：

是不是非常方便？大家从Chrome开发者工具的命令行里还能发现很多其他有用的功能，比如只截取网页上指定元素。

假设我想只截取bing搜索结果页面里id为b_content的元素对应的内容，

在命令里选择Capture node screenshot即可：

下图就是只截取b_content元素对应的截图结果：

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

如何用Chrome自带的截屏功能截取超过一个屏幕的网页的更多相关文章

  1. Windows 自带的截屏功能

    有时没登陆QQ,又急需截图,系统自带的截图功能就可以派上用场了. 1.按下键盘上的Print Screen 按钮 2.打开系统自带的画图工具,点击粘贴就可以了.

  2. Android自己定义截屏功能，相似QQ截屏

    由于公司业务需求 须要对一个屏幕进行截屏.但自带的截屏功能是远远不够项目的功能需求 ,我们是做一个画板软件 .须要的像QQ那样截屏之后 ,能够看到我们自己定义的工具.有画笔,button等等 .and ...

  3. c# wpf 利用截屏键实现截屏功能

    原文:c# wpf 利用截屏键实现截屏功能     最近做一个wpf程序需要截图功能,查找资料费了一些曲折,跟大家分享一下.     先是找到了这样一份代码:     static class Scr ...

  4. PhantomJS linux系统下安装步骤及使用方法(网页截屏功能)

    PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...

  5. android4.3 截屏功能的尝试与失败分析

    1.背景 上一篇讲了在源码中捕获到了android手机的截屏函数(同时按下电源键与音量减,详情http://blog.csdn.net/buptgshengod/article/details/199 ...

  6. 【玩转cocos2d-x之三十九】Cocos2d-x 3.0截屏功能集成

    3.0的截屏和2.x的截屏基本上同样.都是利用RenderTexture来处理,在渲染之前调用call函数,然后调用Cocos的场景visit函数对其进行渲染,渲染结束后调用end函数就可以.仅仅是3 ...

  7. [置顶] Android 应用内禁止截屏功能的实现

    截图介绍   Android的调试工具DDMS提供有截屏功能,很多软件也会有截屏功能,在做支付等安全类应用的时候,为了保证用户的资产和系统安全,往往会禁止应用内截屏,禁止之后,在此应用处于前台的情况下 ...

  8. Atitit截屏功能的设计解决方案

    Atitit截屏功能的设计解决方案 自己实现.... 使用快捷键.. 弹出自己的win,,背景是屏幕快照 点击鼠标光标变成十字状态 出现截屏窗口调整截屏窗口位置与大小 释放鼠标,三个btn,,  复制 ...

  9. iOS截屏功能

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. // ...

随机推荐

  1. JNI 接口规范

    1. 简介 Java 本地接口概述 背景 JDK 1.0 本地方法接口 Java 运行时接口 原始本地接口和 Java/COM 接口 目标 Java 本地接口方法 利用 JNI 编程 JDK 1.1. ...

  2. JAVA基础--流程控制语句02

    JAVA流程控制语句 一.程序流程 定义:只代码执行的先后顺序 种类 顺序流程:程序默认流程,按照书写顺序执行 选择流程:选择语句 判断语句 重复流程: 循环控制语句 二.选择流程控制语句 判断语句 ...

  3. POJ2365【几何】

    因为给出的点已经是顺时针了, 整个长度=相邻点距离+一个圆周长: C++ac代码-G++wa-因为标准不一样.G++用f //#include <bits/stdc++.h> #inclu ...

  4. Redis的高级特性哨兵

    一.哨兵介绍 Redis Sentinel,即Redis哨兵,在Redis 2.8版本开始引入.哨兵的核心功能是主节点的自动故障转移.下面是Redis官方文档对于哨兵功能的描述: 监控(Monitor ...

  5. Cloudera Manager架构原理

    cloudera manager的核心是管理服务器,该服务器承载管理控制台的Web服务器和应用程序逻辑,并负责安装软件,配置,启动和停止服务,以及管理上的服务运行群集. Cloudera Manage ...

  6. Zabbix-Server 添加主机

    之前讲解了如何配置Zabbix 服务端和客户端,现在我们来讲解下如何在zabbix监控端添加主机 Zabbix服务端:Centos 配置 Zabbix服务端 Zabbix客户端:Centos 配置 Z ...

  7. c 浮点科学计数法

    浮点数 比喻1e1 e后面跟的是10的指数(也就是1的10次方,e表示10次方),f表示浮点数 1e1表示1×10¹,其实就是10 再例如5e2f,表示5×10²,也就是500 =========== ...

  8. Python标准库 re

    正则表达式 regular expression 用来匹配一系列符合句法规则的字符串,是一门独立的小型的语言,如果你了解类Unix系统,那么你对正则表达式就一定不陌生.正则表达式的概念最初是由Unix ...

  9. JavaScript中简单排序总结

    JavaScript中简单排序总结 冒泡排序 经典排序算法, 双重for循环 在第二个for循环的时候, j < arr.len -1 -i , 这一步的优化很重要 function bullS ...

  10. 在vue组件的stylus样式总 取消search类型的input按钮中默认样式

    在vue组件的stylus样式中 取消search类型的input按钮中默认样式 记录一个坑 环境 Vue组件 使用了Stylus的CSS风格. 问题 input输入框使用了 type="s ...