`
JerryWang_SAP
  • 浏览: 1035948 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

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

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

 

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

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

 

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

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

 

大家可以看看这个效果:

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

 

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

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

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

 

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

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

 

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

如何用Chrome自带的截屏功能截取超过一个屏幕的网页
0
0
分享到:
评论

相关推荐

    截取网页快照的工具

    网页快照是互联网浏览中一个非常实用的功能,它允许用户保存网页的静态图像,以便在离线状态下查看或记录页面内容。本篇文章将详细介绍如何利用各种工具进行网页快照的截取,以及介绍两个文件“setup.exe”和...

    chrome浏览器 截图插件FireShot

    Chrome浏览器的截图插件FireShot是一款非常实用的工具,它为用户提供了方便快捷的网页截取功能。在日常的工作和学习中,我们经常需要保存网页上的信息,无论是为了记录、分享还是进一步处理,这时,FireShot就能发挥...

    网页截图开发第三方工具总结

    3. ** Lightshot **: 这是一个轻量级的截图工具,可以快速截取屏幕并直接上传到网络,分享链接。对于快速分享网页截图非常方便。 4. **PicPick**: PicPick提供了多种截图模式,包括全屏、窗口、滚动窗口等,还有...

    CSDN清屏好做pdf-chrome浏览器

    CSDN(China Software Developer Network)是一个知名的中文IT社区,用户经常在这里分享技术经验与解决方案。下面将详细介绍这一过程及其相关知识点。 首先,Chrome浏览器是Google开发的一款非常流行的网页浏览工具...

    android 截图 可手动选截取部分

    例如,通过编写一个辅助服务应用,监听屏幕触摸事件,当用户在屏幕上画出一个矩形区域时,记录下这些坐标,然后根据这些坐标获取屏幕截图的子区域。 5. **插件和扩展**: 有些浏览器(如Chrome)支持安装扩展来...

    网页截图软件

    网页截图软件是互联网用户日常工作中不可或缺的工具,它允许用户快速捕获屏幕上的网页内容,以便保存、分享或进一步编辑。这些软件通常提供多种截图模式,包括全屏、区域选择、滚动网页等,以满足不同需求。下面我们...

    f5截取图片

    总的来说,"F5截取图片"是一个特定的截图操作,可能存在于某些特定环境中。而“截取图片”这个标签则涵盖了多种操作系统和软件中广泛使用的截图方式。了解这些截图技巧和工具可以帮助我们在日常工作中更加高效地进行...

    屏幕截图软件

    一、屏幕截图的基本功能 1. 全屏截图:捕获整个显示器的图像,适用于展示整个桌面环境。 2. 区域截图:用户自定义选择屏幕上的任意矩形区域进行截图。 3. 窗口截图:专门捕获打开的应用程序窗口,无需包括窗口之外...

    截图程序 截图程序

    1. 连续截图:一些高级截图工具允许连续截取多个屏幕,拼接成一个长图,非常适合处理滚动内容。 2. 屏幕录制:除了静态截图,许多工具还支持录制屏幕视频,适用于教程制作或问题演示。 3. 自动保存与上传:部分...

    截图软件 截图软件 截图软件

    在IT领域,截图软件是一种非常实用的工具,它允许用户快速捕获屏幕上的任何部分或整个屏幕,并保存为图像文件。这些图像可以用于记录错误、分享信息、制作教程或者简单的交流。下面我们将深入探讨截图软件的功能、...

    网页文本保存网页文本保存

    2. **网页截屏**:如果只需要网页的一部分文本,可以使用截屏工具,如Windows自带的Snipping Tool或第三方软件如Snagit,截取屏幕上的文本区域并保存为图片或文本。 3. **浏览器扩展**:一些浏览器扩展程序,如...

    对屏幕抓图.

    屏幕抓图,也被称为截图或屏幕快照,是计算机用户常用的一种功能,它允许用户捕捉当前显示在电脑屏幕上的图像。这一操作在多种场景下都十分有用,例如记录错误信息、分享教程步骤、保存在线内容或者创建演示文稿。...

    截图软件工具

    区域截图允许用户自由选择截取屏幕上的任意部分,便于突出关键信息;窗口截图则专门针对单个应用程序窗口,有助于聚焦特定程序的内容;自定义形状截图则让用户根据需求裁剪出矩形、圆形或其他形状的图像,满足个性化...

    最好的截图软件

    在IT领域,截图工具是日常工作中不可或缺的一部分,无论是为了演示、记录问题还是分享信息,一个优秀的截图软件都能大大提高效率。本篇文章将详细探讨"最好的截图软件"这一主题,旨在帮助用户找到最适合自己的截图...

    截图工具

    - **浏览器扩展**:如Chrome的Awesome Screenshot,Firefox的Webpage Screenshot等,方便网页截图。 3. **使用方法** - **系统截图**:通常可以通过快捷键进行操作,例如Windows+PrtScn截取全屏,Alt+PrtScn截取...

    网站截全图工具

    1. **浏览器扩展**:例如"Full Page Screen Capture"是Chrome浏览器的一款扩展,它可以一键截取整个网页并保存为JPEG或PNG格式。 2. **独立应用**:有些工具是作为独立的应用程序运行,如"Webpage Screenshot",用户...

    你一定不知道的Win8小技巧.docx

    锁屏界面是Win8.1引入的一个新特性,但它并非适用于所有用户。如果你希望跳过锁屏界面直接登录,可以按照以下步骤进行设置: - **开启设置**:首先按下`Win + R`组合键打开运行对话框,输入`netplwiz`并回车,打开...

    禁用网页“复制”、“粘贴”的破解方法

    4. 屏幕截图:如果只是需要获取可视化的信息,你可以使用屏幕截图工具(系统自带或第三方软件)截取网页内容,然后再通过图片处理软件识别文字。 5. 保存网页为本地文件:部分浏览器支持将整个网页保存为HTML文件,...

    html 转成图片

    1. **屏幕截图**:最简单的办法是通过浏览器的截图功能或者系统自带的截图工具,手动截取HTML页面的部分或全部内容。但这通常不够自动化,不适合批量处理。 2. **PhantomJS/CasperJS**:这两种基于WebKit的无头...

    Quick Shot-crx插件

    这一特性极大地简化了截图流程,节省了用户的时间,尤其对于需要频繁保存网页内容的用户来说,这是一个非常实用的功能。 此外,尽管Quick Shot的描述中没有提及,但通常这类插件可能会提供一些额外的特性,如自定义...

Global site tag (gtag.js) - Google Analytics