調試時使用最多的功能頁面是：元素（ELements）、控制檯（Console）、源代碼（Sources）、網絡（Network）等。
- 元素（Elements）：用於查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點（DOM斷點：在JavaScript調試中，我們經常使用到斷點調試，其實在DOM結構的調試中，我們也可以使用斷點方法，這就是DOM Breakpoint（DOM 斷點））
- 控制檯（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：資源請求的詳細信息花費時間
打開瀏覽器,按F12,點擊Network,可以查看相關網絡請求信息,記得是打開F12之後再刷新頁面纔會開始記錄的。
- 查看Network基本信息,請求了哪些地址及每個URL的網絡相關請求信息都可以看的到：URL，響應狀態碼，響應數據類型，響應數據大小，響應時間
![]()
- 請求URL可進行篩選和分類：選擇不同分類,查看請求URL,方便查找
也可以直接Filter搜索查詢相關URL，可以輸入關鍵字或者正則表達式進行查詢
Waterfall能分割重要的請求耗時,查看具體請求耗時在哪個地方，鼠標指到相關區域可以看到具體耗時
我們具體分析下里面每個各代表什麼意思,分別耗時多少,通過這個來分析服務器到底是哪個環節出了問題
Queueing 是排隊的意思
Stalled 是阻塞 請求訪問該URL的主機是有併發和連接數限制的,必須要等之前的執行才能執行之後的,這段時間的耗時
DNS Lookup 是指域名解析所耗時間
Initial connection 初始化連接時間,這裏一般是TCP 3次連接握手時間
SSL https特有,是一種協議
Request sent 發送請求所消耗的時間
Waiting 等待響應時間,這裏一般是最耗時的
Content Download 下載內容所需要消耗的時間