由于F12是前端開發人員的利器，所以我自己也在不斷摸索中，查看一些博客和資料后，自己總結了一下來幫助自己理解和記憶，也希望能幫到有需要的小伙伴，嘿嘿！

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

?

• ?元素（Elements）：用于查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點等。
• 控制臺（Console）：控制臺一般用于執行一次性代碼，查看JavaScript對象，查看調試日志信息或異常信息。
• 源代碼（Sources）：該頁面用于查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是可以調試JavaScript源代碼，可以給JS代碼添加斷點等。
• 網絡（Network）：網絡頁面主要用于查看header等與網絡連接相關的信息。

1、元素（Elements）

查看元素代碼：點擊如圖箭頭（或用者用快捷鍵Ctrl+Shift+C）進入選擇元素模式，然后從頁面中選擇需要查看的元素，然后可以在開發者工具元素（Elements）一欄中定位到該元素源代碼的具體位置?。

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

?

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

注意：這個修改也僅對當前的頁面渲染生效，不會修改服務器的源代碼，故而這個功能也是作為調試頁面效果而使用。

右邊的側欄個功能的介紹:如下圖所示

?

2、控制臺（Console）

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

3、源代碼（Sources）其主要功能如下介紹

?

4、網絡（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 下載內容所需要消耗的時間

• 如何使用瀏覽器的F12調試頁面？

  ?一個程序員按照要求編寫一個網頁，不可能一次編寫就完全達到目的，一般要對自己的的代碼修改調試幾次后才能到達要求，瀏覽器的F12開發人員工具就可以很方便的幫助程序員調試自己的代碼。

  ? ? ? ? F12 開發人員工具是一套按需采用的工具，網站開發人員可以隨時在任何網頁上使用 F12 工具，從而快速調試 JavaScript、HTML 和級聯樣式表 (CSS)，還可以跟蹤并查明網頁或網絡的性能問題。

  ? ? ? F12調試頁面各個功能分別是什么？

  ?

  ?

  Elements標簽頁

  Elements標簽頁的左側就是對頁面HTML結構的查看與編輯，你可以直接在某個元素上雙擊修改元素的屬性。

  ?

  ?

  Elements標簽頁的右側

  ?

  ?

  Network標簽頁

  Network標簽頁對于分析網站請求的網絡情況、查看某一請求的請求頭和響應頭還有響應內容很有用。注意是在你打開Chrome開發者工具后發起的請求，才會在這里顯示

  ?

  Sources標簽頁

  Sources標簽頁可以查看到請求的資源情況，包括CSS、JS、圖片等的內容。也可以設置各種斷點。對存儲的內容進行編輯然后保存也會實時的反應到頁面上。

  ?

  ?

  Audits標簽頁

  這個對于優化前端頁面、加速網頁加載速度很有用;點擊run按鈕，就可以開始分析頁面，分析完了就可以看到分析結果了

  ?

  ?

  Console標簽頁

  就是Javascript控制臺了

  ?

  ?

  在控制臺中可以直接模擬手機、調整UA、修改網絡連接狀態。

  ?

  ?原文鏈接：https://www.cnblogs.com/zhuzhubaoya/p/9758648.html

  ? ? ? ? ? ? ? ? ? ?https://www.cnblogs.com/yaoyaojing/p/9530728.html

  ?

轉載于:https://www.cnblogs.com/fcc-123/p/11319975.html

總結

以上是生活随笔為你收集整理的chrome中F12工具说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。