利用chrome浏览器实现滚动截屏

作为一个前端工程师,有时需要将已经完成或者尚未完成的页面展示给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”

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容