巧用Chrome浏览器开发者工具模拟超多主流移动设备访问当前页面
Chrome浏览器除了为普通用户提供强大的Chrome扩展外,还提供了强大了chrome
开发者工具,以帮助广大网站开发者提供诸如兼容性等的测试工作。虽然是开发者工具不是为我们这些普通用户准备的,但我们还是可以利用这个工具完成一些不少的工作,比如之前我们介绍的通过利用开发者工具获取在线视频的下载地址,今天我们再来介绍一下利用它来模拟移动设备访问的效果:
1、要使用这个功能,首先确保你的Chrome在32以后版本。在你没有做任何“优化”的情况下,chrome会自动更新至最新版本的,目前最新为Chrome35。
2、 按F12或(Ctrl+Shift+I)键来打开”开发者工具”,点击[Show drawer.]图标,如下图:
3、选择[Emulation]后你会在Device一栏的下拉列表中看到主流的移动设备,覆盖平板,手机,平台也包括android,iOS,Windows
phone,如下图:
选择你需要测试的机型,比如我们这里选择的是谷歌的Nexus 7 平板,然后再点击[Emulate]按钮即可。接下来页面就呈现出Nexus 7
真机下显示的页面效果了,此时的鼠标也变成了一个小灰点也模拟手指滚动的效果。
对于普通用户,这个功能有什么用呢?比如你可以用这个地址来访问某些网站的移动端,来获取他们针对移动端的活动之类的,这个就要看实际情况了,有了它,至少在急需的时候不用去找其他的插件了。
原文链接:http://www.win7en.com/strive/9609.html
开发者工具,以帮助广大网站开发者提供诸如兼容性等的测试工作。虽然是开发者工具不是为我们这些普通用户准备的,但我们还是可以利用这个工具完成一些不少的工作,比如之前我们介绍的通过利用开发者工具获取在线视频的下载地址,今天我们再来介绍一下利用它来模拟移动设备访问的效果:
1、要使用这个功能,首先确保你的Chrome在32以后版本。在你没有做任何“优化”的情况下,chrome会自动更新至最新版本的,目前最新为Chrome35。
2、 按F12或(Ctrl+Shift+I)键来打开”开发者工具”,点击[Show drawer.]图标,如下图:
3、选择[Emulation]后你会在Device一栏的下拉列表中看到主流的移动设备,覆盖平板,手机,平台也包括android,iOS,Windows
phone,如下图:
选择你需要测试的机型,比如我们这里选择的是谷歌的Nexus 7 平板,然后再点击[Emulate]按钮即可。接下来页面就呈现出Nexus 7
真机下显示的页面效果了,此时的鼠标也变成了一个小灰点也模拟手指滚动的效果。
对于普通用户,这个功能有什么用呢?比如你可以用这个地址来访问某些网站的移动端,来获取他们针对移动端的活动之类的,这个就要看实际情况了,有了它,至少在急需的时候不用去找其他的插件了。
原文链接:http://www.win7en.com/strive/9609.html