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工具的使用
学习资料参见：http://www.cnblogs.com/constantince/p/4585983.html
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）当打开开发者模式后，长按浏览器地址栏的“刷新”按钮，即可出来三个比较常用的操作：
- 正常重新加载
- 硬性重新加载
- 清空缓存并硬性重新加载（这个清楚缓存很有用啊）
（3）开启运行时错误自动暂停功能，准确定位出错脚本位置
在 Chrome开发者工具中，可以开户运行时错误自动暂停这一功能，从而使开发者工具能在发现运行时脚本异常时，在异常脚本处暂停运行，跳转至调试页面，供开发人员进一步查找该运行时异常产生的原因。
开启方法：打开Sources面板，点击右边的调试面板上的Pause on exceptions按钮，然后勾选下方的Pauseon Caught Exceptions复选框。
（4）在js脚本中使用console.debug或console.log语句打印调试信息
console打印出来的内容可以在Console面板中查看。
（5）为javascript脚本设置断点
在Sources面板中，打开自己的脚本文件，然后在需要调试的代码位置设置断点。
（6）在开发者工具直接修改javascript脚本用于调试
Chrome开发者工具提供的一种非常实用的功能，即使开发人员可直接对开发者工具的 Source标签页中的代码进行修改，并将其保存，使浏览器在下次执行该段脚本时，直接加载最新修改的版本。目前的 Firebug 及 IE自带的开发者工具都不支持对脚本的直接修改，导致在 Firefox 或 IE中调试脚本时，如果需要对代码进行修改，需要先去修改脚本源文件，再同步至应用服务器，再清理浏览器缓存，最终再次打开应用程序时，才会看到代码修改后的效果。可见Chrome 开发者工具提供的这一功能，大大提供了开发者调试脚本的效果。
需要注意的是，由于这种修改是保存在浏览器缓存中，因此它不会影响到脚本的源文件。当开发人员决定采用修改之后的脚本时，需要将其复制到脚本的源文件中。
（7）在 DOM 元素上设置断点
如果需要监听某个DOM 被修改情况，而不关心是哪行代码做的修改（也可能有多处都会对其做修改）。那么我们可以直接在 DOM 上设置断点，例如，当页面元素的属性变化时，暂停下来用来调试。使用方法加下图，有三种类型：a)子节点修改; b)自身属性修改; c)自身节点被删除。
（8）格式化javascript代码
在Sources面板中打开Javascript代码，然后在左下角的{}按钮，即可以将杂乱无章的代码进行格式化。
（9）javascript代码的调试方法
javascript的调试有暂停/继续、单步执行、单步跳入、单步跳出、禁用/启用所有断点。
