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

屏幕截屏,截屏,4 4 2截屏,android5.0截屏 ,www.515158.com

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

提升程序员工作效率的工具/技巧推荐系列

  1. 推荐一个功能强大的文件搜索工具SearchMyFiles
  2. 介绍一个好用的免费流程图和UML绘制软件-Diagram Designer
  3. 介绍Windows任务管理器的替代者-Process Explorer
  4. 介绍一个强大的磁盘空间检测工具Space Sniffer
  5. 如何在电脑上比较两个相似文件的差异
  6. 程序员工作效率提升系列-推荐一个JSON文件查看和修改的小工具
  7. 将Chrome调试器里的JavaScript变量保存成本地JSON文件
  8. 分享一个开源的JavaScript统计图表库,40行代码实现专业统计图表
  9. 推荐一个短小精悍的Chrome缓存管理工具-ChromeCacheView
  10. 给程序员的福利-分享一个将代码转换成图片的在线网站

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

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

下面分享给大家。

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

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

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

大家可以看看这个效果:

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

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

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

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

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

OA  OA软件  OA系统  OA办公系统  协同OA软件  OA办公软件  开源OA  协同OA  PHPOA  oa  企业信用查询 截屏  仿淘宝详情页面  打包静态库  闭包语法总结  闭包语法  算法导论  排序算法  递归算法  算法并行  智能算法  算法  数据结构 算法 算法  php算法算法  #聊天  IMAP_Search_Key  LumiSoft.Net.dll  学生管理界面  等高线  组合查询  组合输出  组合框  组合  组合 数组 随机组合  asset 资产管理  资产负债表在哪里  更新dataadapter  库jspcatchexception  securitymvc  bio_f_cipher  lash轮播+ js+ xml+  w y f  润乾报表 lash打印  cron表达式  坐标计算  snmp vc++6 0  3099错误  c# 改变颜色 button  短作业优先  自当以控件 asp 实现  uiautomato...  次序 文件 c#  图形  敏感词过滤  过滤javascript  过滤两个字段  filter过滤  android 过滤  数据过滤  过滤掉  过滤