iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
0
Modern Web

認識 Chrome 開發者工具系列 第 22

網路面版 - HTTP 請求列表

今天我們要來看 HTTP 請求列表的欄位所代表的意義

HTTP 請求列表

請先打開開發者工具並切換到網路面版,然後重新載入畫面一次。這時候你的 HTTP 請求列表中應該會有很多個請求,在每個請求的左邊會是請求基本資訊,右邊是載入時間表,稱做 Waterfall,而這個表格是可以使排序的,你可以用滑鼠點擊欄位項目來做排序。而有作用中的排序項目會有一個小箭頭圖示在項目名稱的右邊 箭頭擷圖

除了我們現在看到的欄位之外,當你在欄位項目上按滑鼠左鍵,會出現所有的欄位項目列表,在項目左邊有一個打勾小圖示代表這是已經選用的選項。所以,其實你是可以自己選擇要顯示的項目。下面我們介紹幾個比較常見的項目:

請求列表下拉選單擷圖
圖 1 : HTTP 請求列表裡有許多欄位選項可以選擇

在看請求列表前,請先確定你的列表是使用完整的列表而不是較精簡的,你可以透過工具列上的按鈕來開關它

  • Name: 資源名稱,在資源名稱下方列出來的是這個請求的 URL,因為名稱及 URL 通常都很長,所以會被切掉,你可以點選這個請求來看完整的 HTTP 請求表頭,或是用滑鼠移到請求上,這樣也可以得到完整的請求 URL

  • Status: HTTP 請求狀態,這個就是我們常見的各樣 HTTP 請求回傳後的狀態,常見的有 200, 304 404 等,在 MDN 上有完整列表,如果請求失敗,這裡會有失敗的訊息,而整個請求也會用紅色來表示

  • Protocol: 使用的HTTP 協定,常見的有 http/1.1, h2 (HTTP2) 等等

  • Type: 請求資源的類型,會有 xhr (Ajax 請求), document (HTML), stylesheet (CSS), script (JS) 等等

  • Size: 請求大小,請求大小會有兩個,在上面的是傳輸大小,下面的是原始大小,如果你的一些資源有做 gzip 在這裡就可以明顯的看到原始大小很大,但是傳輸尺寸是小很多的,這裡也可能會出現像是 form memory cache 或是 from disk cache 這類的訊息,也就是這個請求其實沒有下載任何東西,它是去快取拿資料

  • Time: 下載所花的時間,跟 Size 一樣分成兩個,對應到我們剛剛所討論的不同大小

  • Method: HTTP 請求的方法,較常見的就是 GET, POST

  • Content-Encoding: 內容編碼,如果你有使用像是 gzip 這種壓縮格式,就可以在這裡看到

  • Priority: 下載優先順序,通常較高的就是 HTML,然後才是 CSS, JS 最後是像圖片這類的資源

上面列出來的就是常見的幾個請求項目,接下來我們一起來看一下 Waterfall 吧

Waterfall

Waterfall 其實跟昨天講的總覽很像,只是它是列出這個 HTTP 請求本身的開始及結束時間,當你的滑鼠移到請求的 Waterfall 上時,可以看到更清楚的資訊,這些資訊我們明天會跟請求的詳細內容一起說明。再來,你可以看到整個 Waterfall 會有兩條不同顏色的線 (在總覽也有,昨天忘了說 XD),一條是藍色的那是 DOMContentLoaded 事件的時間點,也就是你的 DOM 已經解析完成的時間,但是像是圖片, CSS, 還沒有。後面的一條是紅色的 Load 事件,代表資源包含圖片, CSS 等也都載完了的事件。

waterfall 擷圖
圖 2 : Waterfall 裡列出資源載入的時間點

小結

今天我們一起看了 HTTP 請求列表的欄位項目各自代表的意義還有簡單的看了一下 Waterfall, 明天我們會一起來討論每個請求的細節,包含請求表頭, 內容還有請求所花的時間 (也就是今天沒有講的 Waterfall 內容),那我們就明天見吧!


上一篇
網路面版 - 總覽
下一篇
網路面版 - 了解每個請求
系列文
認識 Chrome 開發者工具30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言