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

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

?

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

1、元素（Elements）

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

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

?

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

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

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

?

2、控制臺（Console）

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

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

?

4、網(wǎng)絡(luò)（Network）大體功能如下：

?

請求文件具體說明

一共分為四個模塊：

• Header：面板列出資源的請求url、HTTP方法、響應(yīng)狀態(tài)碼、請求頭和響應(yīng)頭及它們各自的值、請求參數(shù)等等
• Preview：預(yù)覽面板，用于資源的預(yù)覽。
• Response：響應(yīng)信息面板包含資源還未進(jìn)行格式處理的內(nèi)容
• Timing：資源請求的詳細(xì)信息花費時間

打開瀏覽器,按f12,點擊Network,可以查看相關(guān)網(wǎng)絡(luò)請求信息,記得是打開f12之后再刷新頁面才會開始記錄的

查看Network基本信息,請求了哪些地址及每個URL的網(wǎng)絡(luò)相關(guān)請求信息都可以看的到

URL，響應(yīng)狀態(tài)碼，響應(yīng)數(shù)據(jù)類型，響應(yīng)數(shù)據(jù)大小，響應(yīng)時間

請求URL可進(jìn)行篩選和分類

選擇不同分類,查看請求URL,方便查找

也可以直接Filter搜索查詢相關(guān)URL

可以輸入關(guān)鍵字或者正則表達(dá)式進(jìn)行查詢

Waterfall能分割重要的請求耗時,查看具體請求耗時在哪個地方

鼠標(biāo)指到相關(guān)區(qū)域可以看到具體耗時

我們具體分析下里面每個各代表什么意思,分別耗時多少,通過這個來分析服務(wù)器到底是哪個環(huán)節(jié)出了問題

Queueing 是排隊的意思

Stalled 是阻塞 ?請求訪問該URL的主機是有并發(fā)和連接數(shù)限制的,必須要等之前的執(zhí)行才能執(zhí)行之后的,這段時間的耗時

DNS Lookup 是指域名解析所耗時間

Initial connection 初始化連接時間,這里一般是TCP 3次連接握手時間

SSL https特有,是一種協(xié)議

Request sent 發(fā)送請求所消耗的時間

Waiting 等待響應(yīng)時間,這里一般是最耗時的

Content Download 下載內(nèi)容所需要消耗的時間

• 如何使用瀏覽器的F12調(diào)試頁面？

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

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

  ? ? ? F12調(diào)試頁面各個功能分別是什么？

  ?

  ?

  Elements標(biāo)簽頁

  Elements標(biāo)簽頁的左側(cè)就是對頁面HTML結(jié)構(gòu)的查看與編輯，你可以直接在某個元素上雙擊修改元素的屬性。

  ?

  ?

  Elements標(biāo)簽頁的右側(cè)

  ?

  ?

  Network標(biāo)簽頁

  Network標(biāo)簽頁對于分析網(wǎng)站請求的網(wǎng)絡(luò)情況、查看某一請求的請求頭和響應(yīng)頭還有響應(yīng)內(nèi)容很有用。注意是在你打開Chrome開發(fā)者工具后發(fā)起的請求，才會在這里顯示

  ?

  Sources標(biāo)簽頁

  Sources標(biāo)簽頁可以查看到請求的資源情況，包括CSS、JS、圖片等的內(nèi)容。也可以設(shè)置各種斷點。對存儲的內(nèi)容進(jìn)行編輯然后保存也會實時的反應(yīng)到頁面上。

  ?

  ?

  Audits標(biāo)簽頁

  這個對于優(yōu)化前端頁面、加速網(wǎng)頁加載速度很有用;點擊run按鈕，就可以開始分析頁面，分析完了就可以看到分析結(jié)果了

  ?

  ?

  Console標(biāo)簽頁

  就是Javascript控制臺了

  ?

  ?

  在控制臺中可以直接模擬手機、調(diào)整UA、修改網(wǎng)絡(luò)連接狀態(tài)。

  ?

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

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

  ?

轉(zhuǎn)載于:https://www.cnblogs.com/fcc-123/p/11319975.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。