精简的前言:

  对,我就是想说下事情的来龙去脉。您要不想听,就把耳朵捂起来23333。

  想截个新冠肺炎病毒,全国确诊人数今日增长的图,以确定非湖北地区不再明显增长。

  但由于网页需要的内容分布在两页,需要滚轮截图,微信自带的截图没法实现。

   所以找到了此法,Chrome 自带的 Capture Node Screenshot  截屏,谁用谁香。

整体步骤:

  1. Devtool 选中 Node
  2. Ctrl + Shift + P(Mac 上 Command + Shift + P)
  3. Capture Node Screenshot

过程示例:

  网址:https://news.sina.cn/zt_d/yiqing0121

  F12 选中节点,在节点上按「Ctrl + Shift + P」,

  如果是 Mac 的话按「Command + Shift + P」,

  这时会弹出一个输入框,

  然后在输入框中输入node,

  选Capture Node Screenshot ,

  回车就自动下载了。

最终效果:

    

【GET TIPS】Chrome所见即所得的截图技巧的更多相关文章

  1. 截图技巧——鼠标按着不懂,同时点击截图快捷键(QQ为ctrl+alt+a)即可避免按下快捷键鼠标按下等操作消失截不到的尴尬。

    截图技巧--鼠标按着不懂,同时点击截图快捷键(QQ为ctrl+alt+a)即可避免按下快捷键鼠标按下等操作消失截不到的尴尬.

  2. 5个提升Google Chrome浏览器运行速度的技巧

    尽管有无数个喜欢Google Chrome  浏览器的理由,其中就包括,Chrome已经够快了,但Google Chrome的内存占用而导致的速度拖累还是广受诟病,这种弊端在windows下尤为明显, ...

  3. Mac 下的截图技巧

    最近想制作GIF图片,截图后,发现没有截出鼠标小效果,自己就查阅了一下资料,总结了不少的截图技巧,这里写下来,权当笔记,方便今后检索,方便别人共享. 方法一: 下载 QQ,在QQ的皮娜好设置里面设置截 ...

  4. chrome 浏览器的使用技巧

    前端工程师大部分的工作成果都需要在浏览器中查看,使用 chrome 浏览器的频率非常高.更好更优雅地使用 chrome,将 chrome 配置成一款趁手的浏览器,将极大地提升编程效率.本文将详细介绍 ...

  5. Chrome浏览器如何完美实现滚动截图技巧

    一.前言 我们平时在浏览网页时,想把碰到好的网页内容或者文章截屏保存,但是网页的长度常常会超出屏幕高度,一般的截屏功能只能截取显示在屏幕上的内容,那我们该如何方便快捷截取全部内容?今天就分享一个如何利 ...

  6. Chrome 浏览器如何完美实现滚动截图技巧

    一.前言 我们平时在浏览网页时,想把碰到好的网页内容或者文章截屏保存,但是网页的长度常常会超出屏幕高度,一般的截屏功能只能截取显示在屏幕上的内容,那我们该如何方便快捷截取全部内容?今天就分享一个如何利 ...

  7. chrome developer tool 调试技巧2

    我大概是从 08.09 年从 Firebug 转入 Chrome Developer Tool,一直用到现在,越用越喜欢.我平时调错时常用的功能有: 代码格式化可以将被压缩的代码自动展开 实时代码编辑 ...

  8. [转]Tips——Chrome DevTools - 25 Tips and Tricks

    Chrome DevTools - 25 Tips and Tricks 原文地址:https://www.keycdn.com/blog/chrome-devtools 如何打开? 1.从浏览器菜单 ...

  9. 关于Google Chrome的使用小技巧!

    1 1 http://www.runoob.com/w3cnote/chrome-skip.html Chrome是Google公司开发的一个现代化的网页浏览器,作为三大浏览器之一 它搭载了被称为V8 ...

随机推荐

  1. Nginx代理服务——正向代理

    正向代理 在/opt/app/code的目录下创建一个joy.html文件 <html> <head> <meta charset="utf-8"&g ...

  2. 为什么你应该使用 Kubernetes(k8s)

    Kubernetes (Kube 或 K8s)越来越流行,他是市场上最好的容器编排工具之一. 1. 什么是容器? 容器就是一个包,其中包含了应用及其所有依赖. 容器中的应用与主机系统是隔离的,不关注环 ...

  3. if(a)是什么意思

    if(a)等价于 if(a!=0) if(!a)等价于 if(a==0)

  4. 学习 lind api 十月 第一弹

    step one 我们来看一下代码的结构

  5. Java容器解析系列(13) WeakHashMap详解

    关于WeakHashMap其实没有太多可说的,其与HashMap大致相同,区别就在于: 对每个key的引用方式为弱引用; 关于java4种引用方式,参考java Reference 网上很多说 弱引用 ...

  6. Python 判断小数的函数

    需求分析:1.小数点个数可以使用.count()方法2.按照小数点进行分割 例如: 1.98 [1,98]3.正小数:小数点左边是整数,右边也是整数 可以使用.isdigits()方法4.负小数:小数 ...

  7. (ES6)JavaScript中面向对象类的实现

    在ES5中,我们就知道JS是不支持面向对象的,所以用函数模拟了一个构造函数来实现类的.那么在ES6中,在ES5的原理基础上,将代码书写更为简单,明了. 一.怎样用ES6创建类?首先看一看例子: cla ...

  8. Linux 常用工具iptables

    iptables简介 netfilter/iptables(简称为iptables)组成Linux平台下的包过滤防火墙,与大多数的Linux软件一样,这个包过滤防火墙是免费的,它可以代替昂贵的商业防火 ...

  9. springboot打印sql语句及执行时间

    有时候我们程序的接口比较耗时,需要优化,这时我们可能需要了解该接口执行了哪些sql语句以及耗时 1.引入jar包 <!--监控sql日志--> <dependency> < ...

  10. 仅主机、NAT、桥接模式

    三种模式区别: 桥接模式 :通过主机映射一个ip给虚拟机,只要主机可以访问外网.虚拟机也可以访问,两机可以相互通信. NAT模式:主机和虚拟机在同一个地址,原则上两者不能相互通信,但是通过修改NAT配 ...