解锁 Chrome 浏览器自带网页长截图功能

Chrome 浏览器作为开发人员的最爱，有很多小巧实用的特殊功能。譬如，输入短链接 chrome://inspect 就能帮助 Android 开发人员可视化调试查看应用中用到 SQLite 数据库信息，非常方便。

诸如此类小技巧，还有很多。这篇文章教大家如何利用 Chrome 浏览器自带的功能截取 PC 端的网页滚动长屏。

第一步，使用 Chrome 浏览器打开需要截取的页面，右键点击「检查」或者利用 Mac 快捷键 ⌘Command + ⌥Option + I 打开网页调试页面；

第二步，按下 Mac 快捷键 ⌘Command + ⇧Shift + P 打开命令行窗口，输入 Capture 关键字；

如图，Capture 开头的相关指令就是 Chrome 浏览器自带的所有网页截图功能，其中 Capture full size screenshot 就是我们要找的网页长截图功能，选中点击即可自动截取整个网页页面，并自动保存至本地。

非常方便。同时我们也可以看到，Chrome 还支持区域截图，屏幕截图等。这里再特殊介绍一下 Html 结果指定元素节点截图：

Capture node screenshot

使用这个工具，需要提前使用调试工具左上角的 Select 箭头工具或者直接切换 Elements 窗口选定一个 Html 标签元素，然后再执行 Capture node 命令，才能奏效。

至于 Chrome 提供的其他截图功能就没有必要使用了，毕竟系统自带的快捷键截图已经很方便了：

Command + Shift + 3：全屏截图
Command + Shirt + 4：区域截图

完～

本文由 亦枫 创作并首发于 亦枫的个人博客 ，同步推送微信公众号：安卓笔记侠（androidnotebyyifeng）。

欢迎各种形式地交流与转载，注明作者、出处和微信公众号即可。

本文标题为: 解锁 Chrome 浏览器自带网页长截图功能

本文链接为：https://woyifeng.com/2019/08/01/chrome-long-web-screenshot-tools/

赏

请我喝咖啡，资瓷资瓷~

支付宝
微信
  • 热度 ℃

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

亦枫，<br/>一名魔都安卓程序员<br/><br/>喜欢深夜执笔，<br/>微信公众号：安卓笔记侠<br/><br/>My Motto,<br/>If you can't fly then run, <br/>can't run then walk, <br/>can't walk then crawl, <br/>keep moving forward.