Google开发者工具学习
1.Google开发者工具正确打开方式
（1）自定义控制工具按钮 | 更多工具 | 开发者工具
（2）页面右击菜单，点击“审查元素”
（3）Ctrl + Shift + I
（4）F12
2.Google Chrome提供了8大组工具：
（1）Elements
允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果
（2）Network
可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等
（3）Sources
主要用来调试js
（4）Timeline
提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在Timeline中
（5）Profiles
分析web应用或者页面的执行时间以及内存使用情况
（6）Resources:
对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑
（7）Audits
分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案
（8）Console
显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互
强大的Chrome开发者工具提供了很棒的提示功能，当我们把鼠标悬停在某些项时，会显示一些很有用的提示信息，有时候我们可以得到意想不到的收获。此外，开发者工具还提供了Emulation功能，做移动开发时特别有用。下面先详细研究一下8大工具的使用方法。
3.Elements工具使用
Elemments的界面如下：
区域1是整个页面的DOM结构，我们可以在该区域中用鼠标任选一个DOM节点
区域2是右面的右键菜单，可以正对每一个DOM节点进行一些操作
区域3是当前鼠标选中的DOM节点在整个页面DOM的位置，如上图html->body->div.box->p->a
区域4是当前鼠标选中的DOM节点的一些CSS属性、排版以及其他属性等等
4.Network工具的使用
NetWork的界面如下：
区域1是一些启停、过滤等控制按钮
区域2是页面整体加载时间的概要展示，横坐标为时间轴（与区域2中的Timeline是呼应的），纵坐标为对应区域3中的各种资源。
区域3是页面展示过程中，所有资源的请求请求情况（包括HTTP method、资源的MIME类型、资源的大小以及浏览器器获取资源的花费的时间等等），每一行都对应一个HTTP请求的过程。我们可以通过区域1中的过滤按钮来过滤某些类型的资源，同时，当点击任一一行时，右面板会展示该次HTTP请求和相应的详细信息。一个小tip，当点击Timeline中花花绿绿的时间横柱，可以显示出本资源各个阶段消耗的时间（包括DNS查询时间、request请求时间以及资源内容下载消耗的时间等等）
5.Sources工具的使用
>>to be continued
6.Timeline工具的使用
>>to be continued
7.Profiles工具的使用
>>to be continued
8.Resources工具的使用
>>to be continued
8.Audits工具的使用
>>to be continued
9.Console工具的使用
>>to be continued
10.关于Google Chrome浏览器小tips
（1）当打开开发者模式后，长按浏览器地址栏的“刷新”按钮，即可出来三个比较常用的操作：
- 正常重新加载
- 硬性重新加载
- 清空缓存并硬性重新加载（这个清楚缓存很有用啊）
