如何用Chrome自带的截屏功能截取超过一个屏幕的网页-创新互联

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

推荐一个功能强大的文件搜索工具SearchMyFiles
站在用户的角度思考问题，与客户深入沟通，找到扶风网站设计与扶风网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站建设、成都网站建设、企业官网、英文网站、手机端网站、网站推广、国际域名空间、虚拟空间、企业邮箱。业务覆盖扶风地区。
介绍一个好用的免费流程图和UML绘制软件-Diagram Designer
介绍Windows任务管理器的替代者-Process Explorer
介绍一个强大的磁盘空间检测工具Space Sniffer
如何在电脑上比较两个相似文件的差异
程序员工作效率提升系列-推荐一个JSON文件查看和修改的小工具
将Chrome调试器里的JavaScript变量保存成本地JSON文件
分享一个开源的JavaScript统计图表库，40行代码实现专业统计图表
推荐一个短小精悍的Chrome缓存管理工具-ChromeCacheView
给程序员的福利-分享一个将代码转换成图片的在线网站

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

最近我找到一个办法，通过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自带的截屏功能截取超过一个屏幕的网页

网站栏目：如何用Chrome自带的截屏功能截取超过一个屏幕的网页-创新互联
转载源于：http://csdahua.cn/article/gjosp.html

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯