[轉]chrome浏覽器中 F12 功能的簡單介紹

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：資源請求的詳細資訊花費時間

1. 打開浏覽器,按f12,點選Network,可以檢視相關網絡請求資訊,記得是打開f12之後再重新整理頁面才會開始記錄的

   

2. 檢視Network基本資訊,請求了哪些位址及每個URL的網絡相關請求資訊都可以看的到

   URL，響應狀态碼，響應資料類型，響應資料大小，響應時間

   

3. 請求URL可進行篩選和分類

   選擇不同分類,檢視請求URL,友善查找

   

4. 也可以直接Filter搜尋查詢相關URL

   可以輸入關鍵字或者正規表達式進行查詢

   

5. Waterfall能分割重要的請求耗時,檢視具體請求耗時在哪個地方

   滑鼠指到相關區域可以看到具體耗時

   

6. 我們具體分析下裡面每個各代表什麼意思,分别耗時多少,通過這個來分析伺服器到底是哪個環節出了問題

   Queueing 是排隊的意思

   Stalled 是阻塞  請求通路該URL的主機是有并發和連接配接數限制的,必須要等之前的執行才能執行之後的,這段時間的耗時

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

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

   SSL https特有,是一種協定

   Request sent 發送請求所消耗的時間

   Waiting 等待響應時間,這裡一般是最耗時的

   Content Download 下載下傳内容所需要消耗的時間

• 7

  我們了解了上面每個耗時的時間,才能根據對應時間來修改和優化伺服器通路的速度

  留個作業,大家看看下面這張圖,分别都耗時在哪裡呢,我們又該怎麼定位問題及解決方案呢?我們之後講解

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

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

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

        F12調試頁面各個功能分别是什麼？

  

  Elements标簽頁

  Elements标簽頁的左側就是對頁面HTML結構的檢視與編輯，你可以直接在某個元素上輕按兩下修改元素的屬性。

  

  Elements标簽頁的右側

  

  Network标簽頁

  Network标簽頁對于分析網站請求的網絡情況、檢視某一請求的請求頭和響應頭還有響應内容很有用。注意是在你打開Chrome開發者工具後發起的請求，才會在這裡顯示

  

  Sources标簽頁

  Sources标簽頁可以檢視到請求的資源情況，包括CSS、JS、圖檔等的内容。也可以設定各種斷點。對存儲的内容進行編輯然後儲存也會實時的反應到頁面上。

  

  Audits标簽頁

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

  

  Console标簽頁

  就是Javascript控制台了

  

  在控制台中可以直接模拟手機、調整UA、修改網絡連接配接狀态。