Chrome 已经原生支持截图功能,还可以给节点截图!

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

直接截图

打开开发者工具页面,选择左上角的元素选择按钮(Inspect)

image

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

image

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

image

给节点截图

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

image

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

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

image

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

是不是很方便?

原文首发在我的 GitHub 博客

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值