昨天 Chrome62 稳定版释出，除了常规修复各种安全问题外，还增加很多功能上的支持，比如说今天要介绍的强大的截图功能。

直接截图

打开开发者工具页面，选择左上角的元素选择按钮（Inspect）

Windows 下按住 Ctrl，Mac 就按住 Command，然后在页面拖动选择区域即可。

Chrome会自动使用下载方式进行存储，如下效果图，感觉还不错。

给节点截图

比如说我们刚才手动截取的区域其实是一个Node节点，如果想完整截取这一部分，我们就需要使用节点截图功能。

首先在开发者工具里面选择节点，这个如上图所示直接点选HTML即可。

然后按下快捷键 Ctrl + Shift + p 打开命令工具，Mac下就是 Cmd + Shift + p，输入 node 选择 Capture node screenshot 即可。图片会自动下载。

那么我们真的不需要网页截图插件了，如果想截图整个网页，我们直接在根节点选取就可以了。

是不是很方便？

原文首发在我的 GitHub 博客

本文转载于:Chrome 已经原生支持截图功能，还可以给节点截图！

Chrome 已经原生支持截图功能，还可以给节点截图！的更多相关文章

  1. Chrome已原生支持“Chrome To Mobile”

    完成PC和手机端Chrome的同gmail帐号绑定后,即可按如下操作进行: 已知在版本“19.0.1084.15”中,这个功能默认未开启,需要进入“chrome://flags/”进行手工启用(早几期 ...

  2. 阿里云Aliplayer高级功能介绍(一)：视频截图

    基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...

  3. Unittest 支持 case 失败后自动截图功能的另外两种方式

    原生的unittest框架是不支持case失败后自动截图的功能的,网上看了大家的解决办法,大体上分为两种:1.要么加装饰器2.也有人封装断言这里我们看看还有没有其他的更加方便的方法值得大家一起探讨一下 ...

  4. 大前端技术系列：TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  5. 截图还在使用QQ的Ctrl + Alt + A 截图？还不会网页长截图？

    截图还在使用QQ的Ctrl + Alt + A 截图?还不会网页长截图?   手机自带快捷键,常常使用组合键进行快速截图编辑发好友.保存等,但是貌似到了电脑截图就出现了一大堆拍屏幕党,不少人需要打开微 ...

  6. 记一次"截图"功能的项目调研过程！

    目录 项目需求 功能调研 AWT Swing Html2Image PhantomJS Headless Chrome 实现方案 结论 项目需求 最近,项目接到了一个新需求,要求对指定URL进行后端模 ...

  7. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  8. 【转】天啦噜！原来Chrome自带的开发者工具还能这么用！(提升JS调试能力的10个技巧)

    天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧)   Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...

  9. Chrome扩展开发之四——核心功能的实现思路

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

随机推荐

  1. MySQL第四讲

    昨日内容回顾 表与表之间建关系(外键) """ 表与表之间最多只有四种关系 一对多 多对多 一对一 没有关系 在确定表与表之间的关系的时候记住一句话 换位思考 " ...

  2. CentOS8安装Geant4笔记（一）：Geant4介绍、编译和安装

    前言   在服务器CentOS8.2上安装geant4软件.   GEANT4 介绍   Geant4 是一个用于模拟粒子穿过物质的工具包.其应用领域包括高能.核物理和加速器物理,以及医学和空间科学研 ...

  3. WPF优秀组件推荐之Stylet（一）

    一.简介 Stylet是基于WPF的一款MVVM组件,虽然WPF本身是自带MVVM功能的,但实现起来不是很方便 ,通过Stylet,用户可以用很少的代码就能享受MVVM带来的舒适体验. 目前Style ...

  4. webpack--性能优化之打包构建速度和代码调试优化

    前言 本文来总结写webpack 在性能方面常见的优化方案. 正文 本文分别总结开发环境和生产环境中在打包构建速度和代码调试功能方面的优化方案,如下: 1.开发环境性能优化 (1)优化打包构建速度 a ...

  5. PHP message:filesize(): stat failed for 错误

    PHP message:filesize(): stat failed for 错误 message:filesize(): stat failed for F:s2017\SinaImgUpload ...

  6. linux中文件颜色，蓝色，白色等各自代表的含义

    linux中文件颜色,蓝色,白色等各自代表的含义 绿色文件---------- 可执行文件,可执行的程序 红色文件-----------压缩文件或者包文件 蓝色文件----------目录 白色文件- ...

  7. 合并两个以单链表形式表示的关于x的多项式（基于c语言）

    只写函数内部的,不懂得可以看前面一篇文章对链表的实现: pLinklist addBothLinklist(Linklist* first,Linklist* second){ Linklist *n ...

  8. python中判断为None

    python中经常会有判断一个变量是否为None的情况,这里列举三种方式: if not x if x is None if not x is None *********************** ...

  9. java线程池之newFixedThreadPool定长线程池

    newFixedThreadPool 创建一个定长线程池,可控制线程最大并发数,超出的线程会在队列中等待. 线程池的作用: 线程池作用就是限制系统中执行线程的数量.     根 据系统的环境情况,可以 ...

  10. Presidential-01

    环境搭建 官网地址:https://www.vulnhub.com/entry/presidential-1,500/ 靶机下载地址: https://download.vulnhub.com/pre ...