## 一、概述 F12調試是Chrome提供的前端調試工具；  ## 二、介紹 包括了很多功能欄目，包括Elements、Console、Sources、Network、Performance、Memory、Application、Security、Audits共9個； **Elements**：于查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點等； **Console**：控制臺一般用于執行一次性代碼，查看JavaScript對象，查看調試日志信息或異常信息。 **Sources**：該頁面用于查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是可以調試JavaScript源代碼，可以給JS代碼添加斷點等。 **Network**：網絡頁面主要用于查看header等與網絡連接相關的信息； **Performance**：檢測頁面性能； **Memory**：檢測內存的情況； **Application**：該面板主要是記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。 **Security**：通過該面板你可以去調試當前網頁的安全和認證等問題并確保您已經在你的網站上正確地實現HTTPS。 **Audits**：對當前網頁進行網絡利用情況、網頁性能方面的診斷，并給出一些優化建議。比如列出所有沒有用到的CSS文件等； ## 三、靜態觀察 在Console選項中，可以看到conolse輸出的數據項；  在Network選項中，通過選擇請求地址，看到當前請求的詳細信息（Network-Headers）；  ## 四、動態調試 可以支持直接在console中，輸入參數，動態改變頁面數據，實時看到效果：