使用强大的Chrome开发者工具——移动设备模拟器篇

继续Chrome系列。

撰本文时Chrome版本43.0.2357.124 (64-bit)
正好这段时间在做一个移动端项目,就说说这个功能。先来一览概貌:

这个界面,打开控制台,点击开发者工具左上角放大镜旁边的手机按钮即可出现。可以看到,左边由黑色边框围起来的部分就是模拟移动设备展示的页面。

如果你把鼠标移到页面内的区域,鼠标会变成黑色半透明的圆形,这模拟了我们的手指,简单说下模拟手指的动作:

  • 单击左键,立即放开(click) -> 手指点击(tap)
  • 按住左键,不放开(mousedown) -> 手指触碰屏幕,不离开屏幕(press)
  • 按住左键,移动(mousedown,mousemove),放开左键 -> 手指触碰屏幕,并在屏幕上移动(pan),手指离开屏幕
    遗憾的是,这里无法模拟多点触碰,因为电脑上只有一个鼠标。鼠标右键不会模拟手势,响应的只是浏览器自身系统级的事件。

接下来,上图解释一下左边区域顶部的工具栏的作用:

页面右侧和底部的边界是可以手动拖拽的,与直接调节顶部的高宽效果一样。

模拟区域右上角可以模拟缩放:

在左边这个模拟区域外,在控制台的底部还有一个与移动设备相关的区域。点击开发者工具某一空白区域,让其获得焦点,然后按下esc键,可切换另一个面板的显示与否,选择Emulation标签页,这里也有很多设置,与我们上述所示的基本一致,主要多了地理位置和加速计的模拟:

地理位置模拟,真的可以(@ο@) 哇~:

加速计不太好试,等有机会补上。

好了,以上大概就是设备模拟的全部了。

注意:chrome的这些模拟,与真实的设备肯定还有不少差别,尤其安卓WEBKIT五花八门的浏览器,更不能以为模拟的就和真机一样!