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

chrome-screen

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

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

2016-11-29_194014

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

2016-11-29_194210

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

2016-11-29_194448

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

2016-11-29_194815

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

2016-11-29_194930

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

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址