主要介绍谷歌浏览器的使用，都是一些自己在工作中用到的技巧，不是很全面，希望可以帮到其他人。
1、打开Chrome开发者工具，总所周知的F12（火狐、IE9/10/11），可以看到如下效果。接下来分别介绍标红部分的内容。
2、第一个带搜索的工具，是用来选取网页上某一个或某一块的元素，然后查看、分析、学习。可以看到这个元素的详细信息和结构（父元素、浮动、颜色、字体大小、行高、外边距、无下划线等等），不看源代码时估计会认为这一块是是ul和li结构，原来不是（我觉得这样的结构比ul+li少很多代码）。
可以在右边的element.style{}中加一些样式，看看是不是想要的效果。比如我想让他高一点，宽度再加大一点，但是又不想影响他的同级元素的样式，那么就在这里写。
这里写的样式是实时的，写完后看是不是想要达到的效果，如果是，就把复制到具体的class、id上。当然，刷新一下就没有了。。。
如果想修改整个结构也是可以的，选中一块元素之后，点击右键，如下图:
开始撸代码：
<p>
<a href="#" style="
display: inline-block;
background: url(http://huaban.com/img/icons_login_fixbg.svg) 0 0 no-repeat;
width: 42px;
height: 42px;
"></a><a href="#" style="
display: inline-block;
background: url(http://huaban.com/img/icons_login_fixbg.svg) 0 0 no-repeat;
width: 42px;
height: 42px;background-position:-60px 0
"></a>
<a href="#" style="
display: inline-block;
background: url(http://huaban.com/img/icons_login_fixbg.svg) 0 0 no-repeat;
width: 42px;
height: 42px;background-position:-120px 0
"></a>
<a href="#" style="
display: inline-block;
background: url(http://huaban.com/img/icons_login_fixbg.svg) 0 0 no-repeat;
width: 42px;
height: 42px;background-position:-180px 0
"></a>
</p>
其他的。。。
2、Network查看网页的网络请求信息
名称路径、请求方法(GET\POST)、状态码(从100~500，200表示成功)、类型（网页、图片、js文件等）、初始化、文件大小（浏览器一般都支持gzip压缩，一般有2个大小，小的是经过压缩后传输时的大小，大一些的是解压后的大小；这里没有大小的是来自浏览器缓存，因此对应的时间是0ms）、加载时间、时间线。
这里是输入www.baidu.com之后，一个请求的部分信息，可以从这里看出加载一个首页需要的各种资源，以及加载资源的情况。这些信息都是做性能优化的根据，通过观察和分析，找出页面的性能瓶颈在哪里，然后进行针对的优化。
2.1 Headers -- 请求头 -- 不了解的请搜索：HTTP header，进行深入的学习
这里的headers不仅有请求的header还有响应的header，可以看出，下载一个JS文件是从IP为60.190.116.32上的443端口，GET方式下载的，这是百度的CDN离我最近的服务器，网址是一长串的https安全连接地址。。。。。。响应头。。。。。
2.2预览和响应 -- 从网络上下载的文件 -- 看起来都是相同的
百度一下“百度”，看看结果：
中文经过了URLEncode，地址竟然是http://sp0.baidu.com/，访问一下和访问www.baidu.com是一样的。。。那么结果：
一看就知道，搜索结果前几条肯定是百度云相关的。。。通过查看Response响应结果，可以判断服务是否正常，返回结果是否正确。
上图是返回的JSON数据，在平时的开发中，前后台分工协作时，前台调用后台的服务接口，后台接口有没有返回正确的数据，都是通过这里来查看的。
3、Sources资源 -- 查看网站资源，换个没压缩、没混淆的网站ctrip看下效果
资源都在这里，看中哪个点右键另存为，回家慢慢看。。。注册的asp页面的源码如下：
作为一个前端入门菜鸟，看网站如何布局、如何写代码也是一种自我提高的方式。我觉得他这个密码强度验证的效果不错，我也想做一个，怎么办呢？点击sources看人家怎么写的，然后。。。
先看结构：dl - dt - dd > ul - li + div ，强度就是li元素，JS代码在哪里？
在这里：
骚年好好学啊~~~
JS加个断点，调试调试？
点击要断点的行号，然后就开始debug了。。。按F8、F10
最右边还有哦
