1. 首页
  2. 科技资讯
  3. 利用Chrome 浏览器创建一个带设备外壳的网站截图

利用Chrome 浏览器创建一个带设备外壳的网站截图

利用Chrome 浏览器创建一个带设备外壳的网站截图 科技资讯 第1张

虽然浏览器提供的开发者工具主要是给网页开发人员进行网页调试使用的,但如果你善加利用,普通用户也可以用它来做不少事情。比如可以利用它去捕获优酷、土豆等在线视频的FLV文件并下载到本地,也可以利用审查元素去修改网页上的内容,用来忽悠你的朋友。而今天给大家介绍的是利用Chrome 的开发者工具去快速创建一个网站的截图并且带有设备的外壳,而这一切都不需要第三方的扩展,下面就来教大家怎么来操作:

1、打开你需要截图的网站,然后点击右上角菜单中的“更多工具”——“开发者工具”,或者直接使用快捷键“F12”或“Ctrl+Shift+I”;

利用Chrome 浏览器创建一个带设备外壳的网站截图 科技资讯 第2张

2、在打开的开发者工具窗口的右上角可以看到移动设备调试的图标,如下图,点击它进入;

利用Chrome 浏览器创建一个带设备外壳的网站截图 科技资讯 第3张

3、你可以在“1”选项中选择模拟的设备,默认的设备为Nexus、iPhone、iPad的部分机型,不过你也可以点击“Edit”勾选添加更多的设备,如诺基亚、LG的机型,不过不是所有机型都具备外壳模型,“2”选择要显示的大小,“3”中设置横竖屏、是否显示虚拟键盘和地址栏。

利用Chrome 浏览器创建一个带设备外壳的网站截图 科技资讯 第4张

4、如果没有看到设备外壳,请在下面的菜单中选择打开即可;

利用Chrome 浏览器创建一个带设备外壳的网站截图 科技资讯 第5张

也就是下图中的“1”,一切设置到你需要的参数后,点击“2”,即 Capture screenshot 即可完成截图。

利用Chrome 浏览器创建一个带设备外壳的网站截图 科技资讯 第6张

如果看的不是特别明白,下面的视频演示应该会更加清楚:


分享到: 更多 (0)

yms
相关推荐
发表评论
访客的头像

留言列表

    还没有留言,还不快点抢沙发?