首先介紹Chrome開發者工具中，調試時使用最多的三個功能頁面是：元素（ELements）、控制臺（Console）、源代碼（Sources），此外還有網絡（Network）等。

元素（Elements）：用于查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點等。

控制臺（Console）：控制臺一般用于執行一次性代碼，查看JavaScript對象，查看調試日志信息或異常信息。

源代碼（Sources）：該頁面用于查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是可以調試JavaScript源代碼，可以給JS代碼添加斷點等。

網絡（Network）：網絡頁面主要用于查看header等與網絡連接相關的信息。

元素 Elements

查看元素屬性：可從被定位的源碼中查看部分，如class、src，也可在右邊的側欄中查看全部的屬性，如下圖位置查看

修改元素的代碼與屬性：可直接雙擊想要修改的部分，然后就進行修改，或者選中要修改部分后點擊右鍵進行修改，如下圖

比如修改標題

控制臺 Console

查看JS對象的及其屬性

執行JS語句

查看控制臺日志：當網頁的JS代碼中使用了console.log()函數時，該函數輸出的日志信息會在控制臺中顯示。日志信息一般在開發調試時啟用，而當正式上線后，一般會將該函數去掉。

源代碼 Sources

其主要功能如下介紹

網絡 Network

請求文件具體說明

一共分為四個模塊：

Header：面板列出資源的請求url、HTTP方法、響應狀態碼、請求頭和響應頭及它們各自的值、請求參數等等
Preview：預覽面板，用于資源的預覽。
Response：響應信息面板包含資源還未進行格式處理的內容
Timing：資源請求的詳細信息花費時間

參考文章：
chrome瀏覽器中 F12 功能的簡單介紹
小白玩轉瀏覽器開發者工具—F12（超詳細）