Chrome 已经原生支持截图功能，还可以给节点截图！
昨天 Chrome62 稳定版释出，除了常规修复各种安全问题外，还增加很多功能上的支持，比如说今天要介绍的强大的截图功能。
直接截图
打开开发者工具页面，选择左上角的元素选择按钮（Inspect）
Windows 下按住 Ctrl，Mac 就按住 Command，然后在页面拖动选择区域即可。
Chrome会自动使用下载方式进行存储，如下效果图，感觉还不错。
给节点截图
比如说我们刚才手动截取的区域其实是一个Node节点，如果想完整截取这一部分，我们就需要使用节点截图功能。
首先在开发者工具里面选择节点，这个如上图所示直接点选HTML即可。
然后按下快捷键 Ctrl + Shift + p 打开命令工具，Mac下就是 Cmd + Shift + p，输入 node 选择 Capture node screenshot 即可。图片会自动下载。
那么我们真的不需要网页截图插件了，如果想截图整个网页，我们直接在根节点选取就可以了。
是不是很方便？
原文首发在我的 GitHub 博客
本文转载于:Chrome 已经原生支持截图功能，还可以给节点截图！
Chrome 已经原生支持截图功能，还可以给节点截图！的更多相关文章
- Chrome已原生支持“Chrome To Mobile”
完成PC和手机端Chrome的同gmail帐号绑定后,即可按如下操作进行: 已知在版本“19.0.1084.15”中,这个功能默认未开启,需要进入“chrome://flags/”进行手工启用(早几期 ...
- 阿里云Aliplayer高级功能介绍(一)：视频截图
基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...
- Unittest 支持 case 失败后自动截图功能的另外两种方式
原生的unittest框架是不支持case失败后自动截图的功能的,网上看了大家的解决办法,大体上分为两种:1.要么加装饰器2.也有人封装断言这里我们看看还有没有其他的更加方便的方法值得大家一起探讨一下 ...
- 大前端技术系列：TWA技术+TensorFlow.js => 集成原生和AI功能的app
大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...
- 截图还在使用QQ的Ctrl + Alt + A 截图？还不会网页长截图？
截图还在使用QQ的Ctrl + Alt + A 截图?还不会网页长截图? 手机自带快捷键,常常使用组合键进行快速截图编辑发好友.保存等,但是貌似到了电脑截图就出现了一大堆拍屏幕党,不少人需要打开微 ...
- 记一次"截图"功能的项目调研过程！
目录 项目需求 功能调研 AWT Swing Html2Image PhantomJS Headless Chrome 实现方案 结论 项目需求 最近,项目接到了一个新需求,要求对指定URL进行后端模 ...
- canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- 【转】天啦噜！原来Chrome自带的开发者工具还能这么用！(提升JS调试能力的10个技巧)
天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧) Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...
- Chrome扩展开发之四——核心功能的实现思路
目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...
随机推荐
- 系统整理qt笔记3
qtcreator中不能输入中文: https://blog.csdn.net/qq_15725099/article/details/97305507 main.cpp #include " ...
- Go基础知识梳理（一）
Go基础知识梳理(一) Go中package的用法及作用 package hello 用于分包,Go通过包来管理命名空间 import ( "hello" //通过import关键 ...
- JZ-025-复杂链表的复制
复杂链表的复制 题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针random指向一个随机节点),请对此链表进行深拷贝, 并返回拷贝后的头结点.(注意,输 ...
- unittest的discover方法批量执行02
前言 我们在写用例的时候,单个脚本的用例好执行,那么多个脚本的时候,如何批量执行呢?这时候就需要用到unittet里面的discover方法来加载用例了. 加载用例后,用unittest里面的Text ...
- 使用 MobaXterm 连接矩池云 GPU服务器
Host Name(主机名):hz.matpool.com 或 hz-t2.matpool.com,请以您 SSH 中给定的域名为准. Port(端口号):矩池云租用记录里 SSH 链接里冒号后的几位 ...
- Linux网卡ifcfg-eth0配置详解
DEVICE="eth1" 网卡名称 NM_CONTROLLED="yes" n ...
- oop简易封装增删改查
//注意要先引入含有封装类的文件文件:如下: <?phpclass Db{ public $host='127.0.0.1'; public $user='root'; public $pass ...
- php jsonp接口
//jsonp回调 $callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数,必需 $cgc_k ...
- test 分支强制替换master 分支的办法
test分支改动太多,并且master 分支好久没有改动.直接合并到master 分支的话,会产生很多冲突,几十个文件,修复冲突会花很多时间,并且是没有意义的.因此只能使用test 分支强制替换. 代 ...
- Linux下C语言复制文件
从usr/bin/info复制到myinfo.c #include<unistd.h> #include<fcntl.h> #include<sys/types.h> ...