当前位置: 首页 > Chrome插件推荐 > 利用Chrome开发者工具功能进行网页整页截图的方法
 
说起要截取整个网站页面,很多朋友第一时间想到的都是用哪款chrome插件,确实,我们网站之前也有介绍过一些截图插件比如:

1.Awesome Screenshot

2.Webpage Screenshot

3.Smartshot:支持滚屏的谷歌浏览器截图插件

4.Joxi Full Page Screen Capture:全屏截图插件

但其实现在不少浏览器都自带截屏功能了。尤其是像chrome如此强大的浏览器,比较可惜的是 Chrome 目前并没有很明显地将这个功能展示出来,所以今天就让我们给大家分享一个可以不需要任何软件或者插件就可以直接整屏截取网页的方法吧!

利用Chrome开发者工具功能进行网页整页截图的方法

第一步:打开chrome开发者工具。

打开你想截图的网页,然后按下 F12(macOS 是 option + command + i)调出开发者工具,接着按「Ctrl + Shift + P」(macOS 是 command + Shift + P)。紧接着输入指令 capture,它会提示有三个选项,如下图所示:

利用Chrome开发者工具功能进行网页整页截图的方法

分别是截取全屏、node 模式以及当前范围,用鼠标点击或者用键盘选择对应的就可以了。

第二步:截取手机版的网页

如果你想擷取网页在行动装置例如手机的画面截图,可通过快速键 Ctrl + Shift + M(Mac 为 ?Command + ?Shift + M)来开啟模拟工具,切换 iPhone、iPad、Nexus、Galaxy 等装置开启网页的显示情形,再搭配前面介绍的截图功能抓取网页在手机显示的画面截图。

是不是特别的简单呢?相比起用扩展来截图,这个方式当然会复杂而且简陋点,但当你紧急需要时而且不方便下载扩展的时候,也是个不错的选择。当然你也可以选择网页截图插件

利用Chrome开发者工具功能进行网页整页截图的方法 相关插件

NetBeans Connector

开发者插件 2019-05-19 03:19:17

在NetBeans Connector提供获奖的NetBeans IDE和谷歌Chrome浏览器。
的NetBeans IDE提供了一套完整的JavaScript和HTML5的开发工具,包括代码编辑,调试,现场造型,开发与iOS和Android的奖项之间的深

Webstorm网页调试插件:JetBrains IDE Support

开发者插件 2019-03-05 20:22:16

JetBrains IDE Support是一款支持编译即时显示在浏览器上调试的谷歌浏览器插件。作为web开发人员常用的开发者插件,程序员习惯称之为JB插件。这款调试插件需要与一些开发工具结合使用,

React Developer Tools - React开发者工具

开发者插件 2019-02-20 12:10:21

React Developer Tools是一款由facebook开发的有用的Chrome 浏览器扩展,可以通过 Chrome Web存储获取。使用 Chrome Devtools 进行调试时,可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏

Postman Interceptor

开发者插件 2018-04-16 16:07:54

送你发送请求通过邮差应用程序,它使用浏览器Cookie通过邮差镀铬的应用程序。
邮差拦截器发射帮助请求。
它也可以发送标题这是由镀铬通常的限制,但是对于测试API的关键。

Postman

开发者插件 2018-04-16 16:08:38

Postman是一个非常有力的Http Client工具,Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件,可在Web服务测 试中用来进行接口测试。

MobX Developer Tools

开发者插件 2019-05-19 02:38:33

用于MobX和React的开发工具 检查mobx-react观察员。 编辑可观察对象中的值(不支持编辑反应道具/状态,使用react-devtools) 跟踪MobX可观察量的变化 MST支持

postman接口测试系列教程(一):环境配置

聚合专题 2018-06-25 22:16:02

最近忙着项目接口测试,经过不同工具的对比,发现 postman 使用起来挺顺手的,所以马上决定使用这个工具进行接口测试工作。刚开始的时候,了解了下接口测试的相关信息,直接着手

chrome开发者工具实现整站截屏

聚合专题 2018-08-30 11:44:32

我们经常要遇到将整个网站作为图片保存下来的情况,而windows系统自带的PrintScreen键只能保存当前屏幕的截图 在chrome浏览器中可以安装第三方的截图插件实现整站截图 今天我们要介绍

重庆彩开奖号码官方