Chrome - 使用 开发者工具 对页面截图
-
概述
- 使用 开发者工具 对页面截图
-
背景
-
经常需要截图
-
常用的截图模式有这些
- 窗口截图
- 区域截图
- gif
-
问题
- Chrome 如何截长图
- firefox 好像有插件
- Chrome 如何截长图
-
1. 解决: 使用 Chrome 自带的 开发者工具
-
概述
- 使用开发者工具截图
-
准备
- chrome 浏览器
- 最新版本的都带
- chrome 浏览器
-
步骤
- 开发者工具
- Elements 标签
- 其实哪一页都可以
- 但是用 elements 页, 是因为后面需要
- ctrl + shift + p
- 输入 capture
- 输入完, 会有若干选项可选
-
选项
-
capture area screenshot
-
概述
- 区域截取
-
操作
- 选中选项
- 在浏览器中选择区域
- 保存
-
-
capture full size screenshot
-
概述
- 整页截取
- 截取浏览器加载的内容
- 整页截取
-
操作
- 选中选项
- 保存
-
-
capture node screenshot
-
概述
- 元素截取
-
操作
- 选中选项
- 在 elements 标签中选择 需要的节点
- 保存
-
-
capture screenshot
-
概述
- 屏幕截取
-
操作
- 选中选项
- 保存
-
-
ps
-
ref
-
gif 截图工具
- licecap
-
chrome 的开发者工具, 是个神奇的东西
- 有空的话, 再详细了解
- ctrl + p 和 ctrl + alt + p 这俩神奇组合, 我也不知道是干嘛的
尽量尝试解释清楚; 自己校对能力有限, 如果有错误欢迎指出