文章彙整

Chrome Devtools 開發者工具功能介紹(network篇)

By Astral Web 11 months agoNo Comments
首頁  /  網站設計與開發  /  Chrome Devtools 開發者工具功能介紹(network篇)

chrome-devtools-developer-tools (1)

前端開發最常使用到的開發者工具面板為

今天我們來介紹最後一個NetWork面板功能!

概述

Network面板會展示所有網路請求詳細訊息的紀錄,包括狀態、資源類型、大小、所需時間、Request和Response等等,明確定位出哪些請求比預期耗時並加以調整是優化網頁的關鍵步驟。

 

Network面板區分為5大區塊

 

1.Controls –控制Network的外觀和功能

  • Record Network Log: 紅色代表正在紀錄請求
  • Clear:清空所有資源的請求
  • Capture Screenshots:在頁面載入時擷取不同時間點的螢幕畫面
  • Filter:根據屬性過濾
  • Use small resource raws:顯示內容精簡
  • Preserve Log:當頁面過載或者頁面跳轉時,保留之前頁面的網路請求資料
  • Disable cache:不允許緩存時,所有資源均重新加載DevTools 就不會提供任何來自快取的資源

 

2.Filters –控制 Requests Table 顯示的內容,可多選,按住Cmd(Windows: CtrI

 

3.Overview –顯示資料獲取的時間軸,可根據時間過濾

 

4.Requests -Table按照資料獲取的先後順序檢視請求記錄

  • Name:檔案的名字或者資源的識別符號,點擊後可查看更進一步的紀錄

(包括Headers、Preview、Response、Cookies、Timing)

  • Status:HTTP狀態碼
  • Type:請求資源的MIME型別
  • Initiator:標記請求是由某一對象發起
  • Size:請求的資源大小
  • Time:總持續時間,從發起請求到資源下載完成
  • Waterfall:每一個請求活動不同階段的可視化瀑布流

 

5.Summary -顯示總共的請求數、數據傳輸量、加載時間訊息


chrome-devtools-developer-tools (2)

 

檢視載入事件

DOMContentLoaded事件在Overview和Requests Table對應藍線,並且在Summary以藍色文字顯示確切時間,而Load事件對應紅色。

chrome-devtools-developer-tools (3)

檢視請求的發起物件和依賴物件

滑鼠移至Requests Table的其中一個請求,按住Shift鍵,可以查看该資源是由哪個對象或過程發起的(發起物件)和對該資源的請求過程中引發了哪些資源(依賴物件)。如果B請求是由A請求發起則A是B的發起物件,B是A的依賴物件(B依賴A)。

chrome-devtools-developer-tools (1)

 

以上是NetWork面板基本功能介紹,如果要更詳細的了解其他功能,請參考

https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading

https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。