Chrome - 使用 开发者工具 对页面截图

Posted 2020-11-22 xy14

1. 概述
   1. 使用 开发者工具 对页面截图
2. 背景
   1. 经常需要截图
   2. 常用的截图模式有这些
      1. 窗口截图
      2. 区域截图
      3. gif
   3. 问题
      1. Chrome 如何截长图
         1. firefox 好像有插件

1. 解决: 使用 Chrome 自带的 开发者工具

1. 概述
   1. 使用开发者工具截图
2. 准备
   1. chrome 浏览器
      1. 最新版本的都带
3. 步骤
   1. 开发者工具
   2. Elements 标签
      1. 其实哪一页都可以
      2. 但是用 elements 页, 是因为后面需要
   3. ctrl + shift + p
   4. 输入 capture
      1. 输入完, 会有若干选项可选
4. 选项
   1. capture area screenshot
      1. 概述
         1. 区域截取
      2. 操作
         1. 选中选项
         2. 在浏览器中选择区域
         3. 保存
   2. capture full size screenshot
      1. 概述
         1. 整页截取
            1. 截取浏览器加载的内容
      2. 操作
         1. 选中选项
         2. 保存
   3. capture node screenshot
      1. 概述
         1. 元素截取
      2. 操作
         1. 选中选项
         2. 在 elements 标签中选择 需要的节点
         3. 保存
   4. capture screenshot
      1. 概述
         1. 屏幕截取
      2. 操作
         1. 选中选项
         2. 保存

ps

1. ref
   1. 利用Chrome开发者工具功能进行网页整页截图的方法
2. gif 截图工具
   1. licecap
      1. LICEcap
3. chrome 的开发者工具, 是个神奇的东西
   1. 有空的话, 再详细了解