主要介紹谷歌瀏覽器的使用，都是一些自己在工作中用到的技巧，不是很全面，希望可以幫到其他人。
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
最右邊還有哦
