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

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

<!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高性能建站》这本书。相信会对你有帮助。
二、Console
Console面版可以输出你自己代码。它可以配合其他面板一起使用。点击右上角的>_剪头可以启用或者收起它。它也分了四个选项:
　　Console:  用于输出和现实调试信息
　　Search:  在域名下查找文件和内容
　　Emulation :  启用移动开发模式
　　Rendering:  在界面显示各种监控信息
　　关于Console的玩法，已经有一位大神详细讲解过。我这里就不一一介绍。点击这里去拜读大神的文章吧。Search也比较简单，露珠就不啰嗦了。现在主要讲解一下Emulation模式下的移动开发。移动开发毫无疑问已经成为web开发的主力军了。所以，chrome也打造了一款配合我们开发和测试的工具。

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

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

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

三、结束语

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

Chrome开发者工具不完全指南（五、移动篇）的更多相关文章

  1. Chrome开发者工具不完全指南（六、插件篇）

    本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件.在chrome商店里面有很多插件,没事建议大家去逛逛.不过需要FQ,所以诸位请自备神器.一.皮肤插件 首先是大家期盼已久,翘首以 ...

  2. Chrome开发者工具不完全指南

    Chrome开发者工具不完全指南(一.基础功能篇) Chrome开发者工具不完全指南(二.进阶篇) Chrome开发者工具不完全指南:(三.性能篇) Chrome开发者工具不完全指南(四.性能进阶篇) ...

  3. （转）Chrome开发者工具不完全指南（一、基础功能篇）

    本篇转载自卖烧烤夫斯基,并做了小部分的修改. 原文地址:Chrome开发者工具不完全指南(一.基础功能篇) 原作者:卖烧烤夫斯基 就算你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生 ...

  4. Chrome开发者工具不完全指南：（三、性能篇）

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  5. Chrome开发者工具不完全指南（四、性能进阶篇）

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...

  6. Chrome开发者工具详解（五）之Network面板

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...

  7. Chrome开发者工具不完全指南（二、进阶篇）

    上篇向大家介绍完了基础功能篇,这次分享的是Chrome开发工具中最有用的面板Sources.  Sources面板几乎是我最常用到的Chrome功能面板,也是在我看来决解一般问题的主要功能面板.通常只 ...

  8. Chrome开发者工具不完全指南（一、基础功能篇）

    就算你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生.根据最新的一份(2015/06)的浏览器市场占有率报告,Chrome近乎占有浏览器天下的半壁江山.简单.快捷使它成为了新时代人们 ...

  9. Chrome开发者工具使用指南

    前言 工欲善其事,必先利其器. 在前端工作中,我们常常使用到Chrome开发者工具去做各种各样的事情. 但是您真的了解这些开发者工具吗? 官方文档还是挺详细的:chrome-devtools文档. 但 ...

随机推荐

  1. mybatis自增长插入id

    第一种: <insert id="insertUser" parameterClass="ibatis.User"> <selectKey r ...

  2. SQL SERVER 2005修改数据库名称,包括物理文件名和逻辑名称

    SQL SERVER 2005修改数据库名称,包括物理文件名和逻辑名称   原来数据库名称为 aa,物理文件名称为 aa.mdf 和 aa_log.ldf:   需要修改数据库名称为 bb,物理文件名 ...

  3. Salesforce学习资料

    官方文档下载网址:https://developer.salesforce.com/docs 关于Salesforce的所有官方文档都在以上的地址之中,可以进行在线预览和下载 推荐新手学习以下几本文档 ...

  4. BIT 树状数组 详解 及 例题

    (一)树状数组的概念 如果给定一个数组,要你求里面所有数的和,一般都会想到累加.但是当那个数组很大的时候,累加就显得太耗时了,时间复杂度为O(n),并且采用累加的方法还有一个局限,那就是,当修改掉数组 ...

  5. h5 audio标签在手机上不能自动播放？？？？

    最近在做一个微信端的项目,快到接近尾声的时候,发现还没放入音频,于是乎,放入音频,在电脑端测试一切正常,无阻碍. 后来在手机上测试,发现背景音乐不能播放,于是开始找错,刚开始以为是IIS服务器出错,结 ...

  6. Python之路【第七篇】python基础 之socket网络编程

    本篇文章大部分借鉴 http://www.cnblogs.com/nulige/p/6235531.html python socket  网络编程 一.服务端和客户端 BS架构 (腾讯通软件:ser ...

  7. LabVIEW 吸星大法 - 看见的好东西都是我的(上篇)

    前言 写了多年的LabVIEW程序,你是否面临这样的问题 总是在做一些重复的工作,感觉很没有意思: 总在不停的写代码,做类似的控件,实现相同的功能,丝毫没有成就感: 总在天加班,没有时间去提高自己; ...

  8. *HDU1848 博弈

    Fibonacci again and again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  9. MDK for ARM （keil） 编译后的信息

    文章转自http://blog.csdn.net/gasbi/article/details/6186312 当我们使用Keil对我们的代码进行编译之后,下方Build Output窗口会出现:Pro ...

  10. POJ1753 Flip Game（bfs、枚举）

    链接:http://poj.org/problem?id=1753 Flip Game Description Flip game is played on a rectangular 4x4 fie ...