巧用Chrome浏览器开发者工具模拟超多主流移动设备访问当前页面

Chrome浏览器除了为普通用户提供强大的Chrome扩展外,还提供了强大了chrome 开发者工具,以帮助广大网站开发者提供诸如兼容性等的测试工作。虽然是开发者工具不是为我们这些普通用户准备的,但我们还是可以利用这个工具完成一些不少的工作,比如之前我们介绍的通过利用开发者工具获取在线视频的下载地址,今天我们再来介绍一下利用它来模拟移动设备访问的效果:

1、要使用这个功能,首先确保你的Chrome在32以后版本。在你没有做任何“优化”的情况下,chrome会自动更新至最新版本的,目前最新为Chrome35。

2、 按F12或(Ctrl+Shift+I)键来打开”开发者工具”,点击[Show drawer.]图标,如下图:

win7en 2014-06-22_093530

3、选择[Emulation]后你会在Device一栏的下拉列表中看到主流的移动设备,覆盖平板,手机,平台也包括android,iOS,Windows phone,如下图:

win7en 2014-06-22_093600

选择你需要测试的机型,比如我们这里选择的是谷歌的Nexus 7 平板,然后再点击[Emulate]按钮即可。接下来页面就呈现出Nexus 7 真机下显示的页面效果了,此时的鼠标也变成了一个小灰点也模拟手指滚动的效果。

win7en 2014-06-22_093703

对于普通用户,这个功能有什么用呢?比如你可以用这个地址来访问某些网站的移动端,来获取他们针对移动端的活动之类的,这个就要看实际情况了,有了它,至少在急需的时候不用去找其他的插件了。

评论/反馈 6

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 玉满斋呵呵,不错,过来纯支持一下下!回复
  2. 经典语录挺实用的东西回复
  3. 每日秀很不错的东西回复
  4. 李伟火狐怎么没有这个东西回复
  5. 屠龙这个对博客来说很有用的回复