Chrome 自带截图工具

在浏览器页面测试中，经常会用到截图保存记录，大多数都用的第三方的截图功能，例如Windows截图工具，微信/qq的截图功能，其实完全没必要借助外在的，在 Chrome 浏览器中存在原生的截图功能。支持四种方式的截图。自选区域、整个网页、当前节点截图和当前屏幕。

• Capture area screenshot：自选区域截图
• Capture full size screenshot：全网页截图，包括滚动条没有滚动到，未显示的区域
• Capture node screenshot：当前节点截图
• Capture screenshot：当前屏幕截图

 

使用步骤：

首先按下 ⌘Command + Option + I（Windows 为 F12）快捷键，掉出调试界面。

随后，按下 ⌘Command + ⇧Shift + P（Windows 为 Ctrl + Shift + P），输入 Capture 则可看到四种类型截图命令。

选择需要的截图方式，直接按下回车键便可进行操作。例如使用Capture full size screenshot进行截图。截出来的图质量还是可以的。

此工具针对模拟手机端的网站也同样适用。