chrome瀏覽器中 F12 功能的簡單介紹
由於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、修改網絡連接狀態。
