文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-06-03 13:24

关注

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

  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,会看到很多可用命令,

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

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

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

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

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

大家可以看看这个效果:

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

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

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

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

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

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

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

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

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

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

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯