Chrome开发者工具不彻底指南（5、移动篇）

时间 2019-11-13

原文原文链接

　　前面介绍了Chrome开发者工具的大部份内容工具，如今介绍最后两块功能Audits和Console面板。
1、Audits
　　Audits面板会针对目前网页提出若干条优化的建议，这些建议分为两大类，一类是网络加载性能，另外一类是界面性能。首先开下它的主界面。

　　Audits面板的网络优化建议参照的是雅虎前端工程师的十四条黄金建议。为了验证这一点，咱们能够作一次简单的测试。根据十四条web性能建议中的其中一条:把css文件应该放入html文档的顶部，避免网页在渲染dom后出现闪烁的问题。咱们写以下不规范代码css

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
<!-- 把css文件放入底部 -->
<link rel="stylesheet" type="text/css" href="xuu.css">
</html>

　　而后咱们开始run了。你能够看到它会给出咱们指望的建议，在web Page Performance里面它给出了红点，后面的建议是：将css放入头部:

　　提高界面性能对于用户体验来讲很是重要。若是你按照了十四条建议来处理优化你的web界面，那么出如今Audits中的信息会变得不多。若是你还不知道这十四条建议，我推荐你去阅读《web高性能建站》这本书。相信会对你有帮助。
2、Console
Console面版能够输出你本身代码。它能够配合其余面板一块儿使用。点击右上角的>_剪头能够启用或者收起它。它也分了四个选项:
　　Console: 用于输出和现实调试信息
　　Search: 在域名下查找文件和内容
　　Emulation : 启用移动开发模式
　　Rendering: 在界面显示各类监控信息
　　关于Console的玩法，已经有一位大神详细讲解过。我这里就不一一介绍。点击这里去拜读大神的文章吧。Search也比较简单，露珠就不啰嗦了。如今主要讲解一下Emulation模式下的移动开发。移动开发毫无疑问已经成为web开发的主力军了。因此，chrome也打造了一款配合咱们开发和测试的工具。html

1.进入移动开发模式
　　手机开发模式个人建议是把控制面版右置。这样对手机开发来讲是方便的。长按控制面板右上角类型标签（img4）能够切换控制面板的出现位置。调整完控制面板的位置后。点击Emulation而后再点击出如今选项击面版中的文字。或者你直接点击开发者工具界面左上角的手机图标进入开发者模式。你能够看到当你切换到移动开发模式后，鼠标已经变成了小黑圈圈了。
2.调试设备
　　在Device下拉菜单中选择不一样的手机模式。里面包括安卓和苹果系统的流行机器。勾选Emulate mobile选项能够适应屏幕。Resolution这一项能够调整手机屏幕的高度和宽度。
3.模拟网络情况
　　Netword中选择模拟的网络情况。包括主流和非主流的各类网络。（WIFI，3G，2G等）Sensors选项中自定义移动端的经纬度。在模型中能够设定3D视图角度。把鼠标放上去直接旋转模型。这个功能暂时没发现有啥卵用。

　　不少调试能够在界面进行，这也是露珠一般作的。实际应用到的选项chrome都人性化地列在了主界面。选择了移动开发模式后界面会变成这样子:

　　须要注意的是，Chrome浏览器模拟的只是界面，内核和原生的不少功能是模拟不了的，不过这对于作html5移动开发的来讲已经足够了吧。前端

3、结束语html5

　　本篇文章主要介绍了移动开发测试的工具部分。chrome在模拟移动开发时效果有些欠缺。若是须要真机调试，诸位能够考虑UC流浪器的开发版本（只支持安卓），chrome的移动版本（只支持安卓），或者本身买台mac（露珠买不起啊）再买台iphone（露珠的是小米的吊死机啊）配合联调。weinre那玩意儿只能调样式，还得本身加代码建议就不要去用了。好了，Chrome开发者工具都介绍的差很少了，下一篇是本系列的尾篇。介绍几款插件用（包括高大上的开发者工具皮肤哦），敬请关注！web