Chrome开发者工具不完全指南五移

(点击上方蓝字,可快速   

Consol:用于输出和现实调试信息

Sarch:在域名下查找文件和内容

Emulation:启用移动开发模式

Rndring:在界面显示各种监控信息

关于Consol的玩法,已经有一位大神详细讲解过。我这里就不一一介绍。点击这里去拜读大神的文章吧。Sarch也比较简单,露珠就不啰嗦了。现在主要讲解一下Emulation模式下的移动开发。移动开发毫无疑问已经成为wb开发的主力军了。所以,chrom也打造了一款配合我们开发和测试的工具。

进入移动开发模式

手机开发模式我的建议是把控制面版右置。这样对手机开发来说是方便的。长按控制面板右上角类型标签(img4)可以切换控制面板的出现位置。调整完控制面板的位置后。点击Emulation然后再点击出现在选项击面版中的文字。或者你直接点击开发者工具界面左上角的手机图标进入开发者模式。你可以看到当你切换到移动开发模式后,鼠标已经变成了小黑圈圈了。

2.调试设备

在Dvic下拉菜单中选择不同的手机模式。里面包括安卓和苹果系统的流行机器。勾选Emulatmobil选项可以适应屏幕。Rsolution这一项可以调整手机屏幕的高度和宽度。

3.模拟网络状况

Ntword中选择模拟的网络状况。包括主流和非主流的各种网络。(WIFI,3G,2G等)Snsors选项中自定义移动端的经纬度。在模型中可以设定3D视图角度。把鼠标放上去直接旋转模型。这个功能暂时没发现有啥卵用。

很多调试可以在界面进行,这也是露珠通常做的。实际应用到的选项chrom都人性化地列在了主界面。选择了移动开发模式后界面会变成这样子:

需要注意的是,Chrom浏览器模拟的只是界面,内核和原生的很多功能是模拟不了的,不过这对于做html5移动开发的来说已经足够了吧。

三、结束语

本篇文章主要介绍了移动开发测试的工具部分。chrom在模拟移动开发时效果有些欠缺。如果需要真机调试,诸位可以考虑UC流浪器的开发版本(只支持安卓),chrom的移动版本(只支持安卓),或者自己买台mac(露珠买不起啊)再买台iphon(露珠的是小米的吊死机啊)配合联调。winr那玩意儿只能调样式,还得自己加代码建议就不要去用了。好了,Chrom开发者工具都介绍的差不多了,下一篇是本系列的尾篇。介绍几款插件用(包括高大上的开发者工具皮肤哦),敬请







































北京白癜风医院哪里最好
白癜风前期症状



转载请注明:http://www.nylrzx365.com/csgj/7932.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了