工欲善其事，必先利其器
一. 先來認識一下這些按鈕
先來看這張圖最上頭的一行是一個功能菜單，每一個菜單都有它相應的功能和使用方法，依次從左往右來看
1.箭頭按鈕：用於在頁面選擇一個元素來審查和查看它的相關信息，當我們在Elements這個按鈕頁面下點擊某個Dom元素時，箭頭按鈕會變成選擇狀態
2.設備圖標：點擊它可以切換到不同的終端進行開發模式，移動端和pc端的一個切換，可以選擇不同的移動終端設備，同時可以選擇不同的尺寸比例，chrome瀏覽器的模擬移動設備和真實的設備相差不大，是非常好的選擇
可選擇的適配
3.Elements 功能標籤頁：用來查看，修改頁面上的元素，包括DOM標籤，以及css樣式的查看，修改，還有相關盒模型的圖形信息，下圖我們可以看到當我鼠標選擇id 爲lg_tar的div元素時，右側的css樣式對應的會展示出此id 的樣式信息，此時可以在右側進行一個修改，修改即可在頁面上生效， 灰色的element.style樣式同樣可以進行添加和書寫，唯一的區別是，在這裏添加的樣式是添加到了該元素內部，實現方式即：該div元素的style屬性，這個頁面的功能很強大，在我們做了相關的頁面後，修改樣式是一塊很重要的工作，細微的差距都需要調整，但是不可能說做到每修改一點即編譯一遍代碼，再刷新瀏覽器查看效果，這樣很低效，一次性在瀏覽器中修改之後，再到代碼中進行修改
- 對應的樣式
- 盒模型信息
同時，當我們瀏覽網站看到某些特別炫酷的效果和難做的樣式時候，打開這個功能，我們即可看到別人是如何實現的，學會它這知識就是你的了，仔細鑽研也會有意想不到的收穫
4.Console控制檯：用於打印和輸出相關的命令信息，其實console控制檯除了我們熟知的報錯，打印console.log信息外，還有很多相關的功能，下面簡單介紹幾個：
a: 一些對頁面數據的指令操作，比如打斷點正好執行到獲取的數據上，由於數據都是層層嵌套的對象，這個時候查看裏面的key/value不是很方便，即可用這個指令開查看，obj的json string 格式的key/value，我們對於數據裏面有哪些字段和屬性即可一目瞭然
其他功能
b: 除了console.log還有其他相關的指令可用
console也有相關的API
5.Sources js資源頁面：這個頁面內我們可以找到當然瀏覽器頁面中的js 源文件，方便我們查看和調試，在我還沒有走出校園時候，我經常看一些大站的js代碼，那時候其實基本都看不懂，但是最起碼可以看看人家的代碼風格，人家的命名方式，所有的代碼都是壓縮之後的代碼，我們可以點擊下面的{}大括號按鈕將代碼轉成可讀格式
Sources Panel 的左側分別是 Sources 和 Content scripts和Snippets
- 對應的源代碼
- 格式化後的代碼
關於打斷點調試的內容，下面介紹，先來說一些，其他平時基本沒人用但是很有用的小點，比如當我們想不起某個方法的具體使用時候，會打開控制檯隨意寫一些測試代碼，或者想測試一下剛剛寫的方法是否會出現期待的樣子，但是控制檯一打回車本想換行但是卻執行剛寫的半截代碼，所以推薦使用Sources下面的左側的Sinppets代碼片段按鈕，這時候點擊創建一個新的片段文件，寫完測試代碼後把鼠標放在新建文件上run，再結合控制檯查看相關信息（新建了一個名叫：app.js的片段代碼，在你的項目環境頁面內，該片段可執行項目內的方法）
6.Network 網絡請求標籤頁：可以看到所有的資源請求，包括網絡請求，圖片資源，html,css，js文件等請求，可以根據需求篩選請求項，一般多用於網絡請求的查看和分析，分析後端接口是否正確傳輸，獲取的數據是否準確，請求頭，請求參數的查看
- 所有的資源
以上我選擇了All，就會把該頁面所有資源文件請求下來，如果只選擇XHR 異步請求資源，則我們可以分析相關的請求信息
- 請求的相關信息
打開一個Ajax異步請求，可以看到它的請求頭信息，是一個POST請求，參數有哪些，還可以預覽它的返回的結果數據，這些數據的使用和查看有利於我們很好的和後端工程師們聯調數據，也方便我們前端更直觀的分析數據
- 預覽請求的數據
7.Timeline標籤頁可以顯示JS執行時間、頁面元素渲染時間，不做過多介紹
8.Profiles標籤頁可以查看CPU執行時間與內存佔用，不做過多介紹
9.Resources標籤頁會列出所有的資源，以及HTML5的Database和LocalStore等，你可以對存儲的內容編輯和刪除 不做過多介紹
10.Security標籤頁 可以告訴你這個網站的安全性，查看有效的證書等
11.Audits標籤頁 可以幫你分析頁面性能，有助於優化前端頁面，分析後得到的報告
- 分析結果
二.Post man你值得擁有的網絡請求神器
在我們的開發過程中，後端的接口都是由發起AJAX請求而獲取到的相關數據，但是很多情況是我們的業務還沒有做到那塊時，後端的同學接口都已經準備好了，但是爲了便於後期的工作，將接口請求的數據模擬訪問，然後對接口聯調很重要，也很方便，因爲我們不可能把每個請求代碼都寫到文件裏編譯好了再去瀏覽器內查看，這時候可以安裝一個post man網絡請求插件，在谷歌應用商店下載，需要翻牆
該擴展程序使用非常簡單，功能同時也非常強大，輸入你的請求，選擇好請求的method，需要請求參數的挨個填好，send之後，就可以看到返回的數據，這個小工具很利於我們的開發
