如何用Chrome自带的截屏功能截取超过一个屏幕的网页
2018-10-19 22:20
555 查看
提升程序员工作效率的工具/技巧推荐系列
- 推荐一个功能强大的文件搜索工具SearchMyFiles
- 介绍一个好用的免费流程图和UML绘制软件-Diagram Designer
- 介绍Windows任务管理器的替代者-Process Explorer
- 介绍一个强大的磁盘空间检测工具Space Sniffer
- 如何在电脑上比较两个相似文件的差异
- 程序员工作效率提升系列-推荐一个JSON文件查看和修改的小工具
- 将Chrome调试器里的JavaScript变量保存成本地JSON文件
- 分享一个开源的JavaScript统计图表库,40行代码实现专业统计图表
- 推荐一个短小精悍的Chrome缓存管理工具-ChromeCacheView
- 给程序员的福利-分享一个将代码转换成图片的在线网站
前端开发人员经常需要将当前的网页截图发给产品经理讨论。如果网页很长,一个屏幕显示不下,那么操作系统自带的截图功能就没有办法截取整个屏幕了。
最近我找到一个办法,通过Chrome开发者工具自带的截图功能可以截取超过一个屏幕的完整网页视图。
下面分享给大家。
打开要截取完整屏幕的网页,打开Chrome开发者工具,按住快捷键Ctrl+Shift+P,会看到很多可用命令,
在命令提示符里输入“full”,会看到只有一个可用选项:Capture full size screenshot:
点击这个命令,Chrome就自动截取当前网页的完整图片,并且提示我们另存到本地。
大家可以看看这个效果:
是不是非常方便?大家从Chrome开发者工具的命令行里还能发现很多其他有用的功能,比如只截取网页上指定元素。
假设我想只截取bing搜索结果页面里id为b_content的元素对应的内容,
在命令里选择Capture node screenshot即可:
下图就是只截取b_content元素对应的截图结果:
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
相关文章推荐
- 如何做一个简单的Chrome Extension用于网页截屏
- 小技巧: 屏幕截图(截屏)工具如何截取(捕获)下拉菜单
- 如何在一个已排序的NSArray中搜索某一特定字符串?答案是使用CFArray自带的搜索功能:
- 如何在一个已排序的NSArray中搜索某一特定字符串?答案是使用CFArray自带的搜索功能
- 如何在终端下截取一个完整长度的网页截图
- 我想做一个天气预报的APP,想知道如何从网页上截取数据并录入数据库。
- chrome 如何开启网页另存为.mhtml 功能
- 如何制作一个简单的仿百度搜索功能的网页
- Chrome表单如何去掉默认的淡黄色背景及如何关闭浏览器自带填充表单功能?
- ubuntu滚动屏幕长截屏,截取整个网页
- 实现了截屏功能,支持截取当前整个屏幕或者截取当前屏幕某一部分
- 最近做了一个类似社交的网站,看到新浪微博右侧有一个网页在线聊天的功能,如何才能实现网页在线聊天功能(新浪微博这种聊天)?
- 如何做一个统计网页访问量的功能
- 全网最详细的如何在谷歌浏览器里正确下载并安装Postman【一款功能强大的网页调试与发送网页HTTP请求的Chrome插件】(图文详解)
- 如何在一个已排序的NSArray中搜索某一特定字符串?答案是使用CFArray自带的搜索功能
- Flex中如何给一个按钮添加链接,点击链接打开一个网页呢?
- 在chrome中利用“油猴”为每个网页增加“返回顶部”功能
- 有一个由数字1,2,...,9组成的数字串(长度不超过200),问如何M(1<=M<=20)个加号插入这个数字串中
- Android平台,如何调用javascript操作网页和js调用系统功能
- 如何使一个HTA位于屏幕中心(Win32_DesktopMonitor)