工欲善其事 必先利器。

Google除錯面板一一介紹：Mac: Alt + Command + I,window:Ctrl + Shift + I.

element面板

這個面板顯示了頁面全部html程式碼，用於除錯css程式碼，右側展示左側對應選擇元素屬性。點選屬性值可進行修改檢視。

除錯小技巧：

1，改變字型大小或者間距時，按住alt+箭頭可零點一個畫素間距調整，按住shift+箭頭可十個畫素間距調整；

2，定位元素快捷鍵：ctrl+shift+c

3，edit as HTML快捷鍵 F2

properties用於檢視屬性所具有的全部屬性方法

Network面板

這個面板用於檢視網路響應內容，包括Ajax類請求。點選左側請求右側顯示請求響應頭部具體資訊及cookies。

Required Headers/Response Headers請求/響應頭資訊。 Query String Parameters 請求引數。可實時檢測每個請求是否被正確發出、相應資訊是否正確等。

Source面板

這個面板可進行js除錯

選擇需除錯js，單擊側欄新增斷點，頁面執行到斷點處出現右側除錯單步控制條，各區域性、全域性變數；

F8 pause/continue 暫停繼續

F10 step over 單步跳過

F11 step into 單步進入 

shift+F11 step out單步跳出

在watch expressions(檢視變數)處，輸入你想檢視的變數名可方便檢視變數變化

在js右鍵選擇本地修改可調出控制檯，在控制檯進行屬性修改除錯；

單擊{}可美化js

TimeLIne面板

這個面板顯示系統載入頁面耗時情況，方便開發者在優化頁面載入速度時進行鍼對性優化。

resource面板

顯示該頁面所有資源 包括圖片、css、js，可對頁面進行全面下載瀏覽。對於意圖仔細研究某頁面時發揮很大作用。

audits面板

對於前端開發者是一大利器，可提供優化頁面的建議。點選run之後即可顯示。

console面板

除了檢視錯誤資訊、列印除錯資訊（console.log()）、寫一些測試指令碼之外，還可以當做js API用。例如：依次輸入var d=new Date() ->按enter ->  d -> 按enter -> console.dir(d)即可顯示d的所有屬性

console.dir() //顯示元素的dom屬性

Using the %c format specifier allows you to style the console output.

console.log('%cThis text is styled!', 'color: #86CC00; background-color: blue; font-size: 20px; padding: 3px;')