如何用Chrome自带的截屏功能截取超过一个屏幕的网页

简介: 如何用Chrome自带的截屏功能截取超过一个屏幕的网页

前端开发人员经常需要将当前的网页截图发给产品经理讨论。如果网页很长,一个屏幕显示不下,那么操作系统自带的截图功能就没有办法截取整个屏幕了。


最近我找到一个办法,通过Chrome开发者工具自带的截图功能可以截取超过一个屏幕的完整网页视图。


下面分享给大家。


打开要截取完整屏幕的网页,打开Chrome开发者工具,按住快捷键Ctrl+Shift+P,会看到很多可用命令,



image.png

在命令提示符里输入“full”,会看到只有一个可用选项:Capture full size screenshot:


image.png

点击这个命令,Chrome就自动截取当前网页的完整图片,并且提示我们另存到本地。


image.png

大家可以看看这个效果:

image.pngimage.png


是不是非常方便?大家从Chrome开发者工具的命令行里还能发现很多其他有用的功能,比如只截取网页上指定元素。


假设我想只截取bing搜索结果页面里id为b_content的元素对应的内容,


image.png

在命令里选择Capture node screenshot即可:

image.png


下图就是只截取b_content元素对应的截图结果:

image.pngimage.png

相关文章
|
10天前
|
移动开发 前端开发 JavaScript
如何实时准确地从HTML5视频中截取当前播放画面
如何实时准确地从HTML5视频中截取当前播放画面
24 4
|
5月前
|
移动开发
解决网页、H5页面在手机端访问时,底部会有一段莫名其妙的空白,大约有几百像素高的留白
解决网页、H5页面在手机端访问时,底部会有一段莫名其妙的空白,大约有几百像素高的留白
|
9月前
|
Web App开发 文字识别 JavaScript
强大的实况文本功能,直接复制图片上的文字(macOS)
用OCR软件,是很多人的选择。我曾经也给大家推荐过“天若OCR”软件,还有朋友在用吗?
194 0
|
10月前
|
编解码
漏刻有时拼接屏测试分辨率的测试页面
漏刻有时拼接屏测试分辨率的测试页面
41 0
|
12月前
|
Windows
windows自带的比微信好用的截图工具:截取任意形状图片,标尺画直线,窗口图精准截取
windows自带的比微信好用的截图工具:截取任意形状图片,标尺画直线,窗口图精准截取
321 0
|
计算机视觉
Qt实用技巧:测试80*1080p拼接后显示刷新帧率
Qt实用技巧:测试80*1080p拼接后显示刷新帧率
|
编解码
根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片
根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片
110 0
根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片
|
Web App开发 前端开发 开发者
如何用Chrome自带的截屏功能截取超过一个屏幕的网页
如何用Chrome自带的截屏功能截取超过一个屏幕的网页
115 0
如何用Chrome自带的截屏功能截取超过一个屏幕的网页
Word文档中插入的图片显示不全、嵌入式图片显示不全解决方法,仅设置图片为单倍行距方法
Word文档中插入的图片显示不全、嵌入式图片显示不全解决方法,仅设置图片为单倍行距方法
654 0
Word文档中插入的图片显示不全、嵌入式图片显示不全解决方法,仅设置图片为单倍行距方法