作为一个前端工程师，有时需要将已经完成或者尚未完成的页面展示给PM或者其他leader看，可能页面长度超出了屏幕的尺寸，利用原生的Mac截屏则只能截取部分，这样的话就需要将截取的每部分标记好序号发送给PM或者其他leader看，这样的看到的并不是整体的效果，从根本上没有解决问题。目前Chrome浏览器发布的新版本中添加了截图的功能，接下来介绍一下具体的操作方法：
打开Chrome浏览器，进入需要截图的网站页面，加载完毕之后
场景一：截取整个页面
1.打开开发者工具（在页面的任何地方点击鼠标右键，在弹出菜单中选择“检查”选项或者使用快捷键组合：Alt + Command+ I (Mac) 或 Ctrl + Shift + I (Windows)）
2.打开命令行（快捷键组合：Command + Shift + P(Mac) 或 Ctrl + Shift + P (Windows)）
3.在命令行中输入“Screen”,点击“Capture full size screenshot”
场景二： 截取页面中的某些元素
1.打开开发者工具（在页面的任何地方点击鼠标右键，在弹出菜单中选择“检查”选项或者使用快捷键组合：Alt + Command+ I (Mac) 或 Ctrl + Shift + I (Windows)）
2.点击开发者工具左上角的“选取元素”按钮，在网页中点击要截图的元素
3.打开命令行（快捷键组合：Command + Shift + P(Mac) 或 Ctrl + Shift + P (Windows)）
4.在命令行中输入“Screen”,点击“Capture node screenshot”
网友评论