在瀏覽器面板按F12就可以進入調試界面，裏面的很多功能對前段開發用處很大。
Element：主要是用來調試網頁中的html標籤代碼和css樣式代碼Network：查看網頁的http通信情況，包括Method、Type、Timeline（網絡請求的時間響應情況）等Source:查看JS文件、調試JS代碼Timeline:查看js的執行時間，頁面元素渲染時間等Profiles：用來查看網頁的性能，比如CPU和內存消耗Resources：用來查看加載的各種資源文件，比如js、css、圖片等Audits：可以分析當前網頁，可以快速的分析出哪些資源被使用、哪些資源沒有使用，然後提出建議Console：可以查看錯誤信息、打印調試信息、調試js代碼，還可以當作Javascript API查看下面來詳細的介紹console的功能和用法：
（1）如果想清空控制檯，可以點擊左上角那個 Chrome 控制檯console的用法來清空，當然也可以通過在控制檯輸入console.clear()來實現清空控制檯信息。
（2）現在假設一個場景，如果一個數組裏面有成百上千的元素，但是你想知道每個元素具體的值，這時候想想如果你用alert那將是多慘的一件事情，因爲alert阻斷線程運行，你不點擊alert框的確定按鈕下一個alert就不會出現。下面我們用console.log來替換，感受一下它的魅力。
（3）console.count，當你想統計代碼被執行的次數
（4）美元符號命令返回最近一次表達式執行的結果，什麼意思？在頁面右擊選擇審查元素，然後在彈出來的DOM結點樹上面隨便點選，這些被點過的節點會被記錄下來，而
（5）最後說一下chrome控制檯一個簡單的操作，如何查看頁面元素，看下圖就知道了
