經過這幾天的介紹,我想大家對這個面版已經有一定的認識了,但是我們其實還沒有進到每個 HTTP 請求裡面,去查看這個請求細節,而這就是我們今天要做的。好,就讓我們一起開始吧!
一開始我們一樣先打開 Chrome 開發者工具然後切換到網路面版 (Network),這時候你的頁面可能沒有完整的 HTTP 請求列表,請重新整理一下你的頁面,你應該就會得到一個完成的 HTTP 請求列表在你網路面版裡面。
今天我們用的範例網站一樣是 iT 邦幫忙的首頁
我選用的 HTTP 請求是 ithelp.ithome.com.tw
的 document
文件。在用滑鼠左鍵點擊後,它會在請求的右邊打開一個新的頁面顯示請求細節,如下圖:
圖 1 : HTTP 請求的細節頁面
這個頁面裡有幾個頁籤,我們一起來看:
在表頭裡會有很多資訊是來自 HTTP 協定,很多內容其實我並不了解(光 HTTP 應該就可以寫一個系列文XD),所以我介紹的會是我知道的,你如果有特別想知道的 HTTP 資訊,可以拿那個資訊的名稱去做搜尋,應該很快就可以找到相關的文件
每個 HTTP 請求裡都會包含這個資訊,在這裡面它又分成了幾個區塊:
General: 這裡算是一個比較精簡資訊的整理,讓你可以很快的知道這個請求的位置 (Request URL), 請求方式 (Request Method), 這個請求的狀態 (Status Code)
Response Headers: 這裡面就是伺服器在接收到我們的請求後回傳的表頭,裡面會有快取設定 (Cache-Control), 內容編碼方式 (Content-Encoding), 內容大小(長度) (Content-Length), 內容類別 (Content-Type) 還有是那一種伺服器 (Server),你可以用 view source
來看它的原始資料,我們目前看的這個列表是開發者工具有整理過的
Request Headers: 這就是這個請求送出的要求訊息,裡面會有接受的類別 (Accpet), 編碼方式 (Accept-Encoding), 語言 (Accept-Language), 位置 (Host) 及使用的瀏覽器 (User-Agent),跟 Response Headers 一樣,你也透過 view source
可以看它的原始資料
如果你的請求有使用到參數,那可能還會有下面的欄位,裡面會有你的請求所帶的請求參數,在除錯的時候常常會需要看這些參數
這兩個頁籤其實有點像,官方文件裡我也沒有找到有什麼不同… 但是 Preview 算是我比較常用的,你可以用它來看回傳的資源內容,像是圖片,它就會直接顯示圖片給你看,如果是像 JSON 類的資料,它會整理成一個類似 tree 的列表給你看
圖 2 : 預覽及回覆的內容在我們這個例子裡有著一樣的內容
這邊就是可以看到這個請求的 cookies 資訊
圖 3 : 在這個頁面裡可以看到 cookies 的詳細內容
這個頁籤就有比較多資訊我們可以一起來看了(這裡使用的 HTTP 請求改為 simplemde.min.css
這個檔案,它的資訊比較完整),有些資訊官方文件也沒有提供,我就沒有列在下面
Chrome 一次可以同時處理的 HTTP 請求為 6 個,所以一個頁面如果有超過 6 個請求,它就會把這些請求分批處理。而這個限制是在 HTTP/1.0 及 1.1,HTTP2 就沒有這個限制,它可以一次處理所有請求
圖 4 : Timing 頁面裡可以看到與前面介紹的 Waterfall 一樣的資源載入時間表
上面提到的幾個資訊,最重要的應該就是 Waiting 跟 Content Download 了,這兩個可能都代表著你的網路連線較慢或是伺服器的速度很慢,而 Content Download 很慢也有可能是請求的下載量太多了。檢查伺服器及網路狀況或是壓縮請求 (gzip) 都可能會有幫助。
今天我們算是把網路面版講完了,花了好幾天的時間,可是還是有很多內容沒有提到(遮臉)。不過我可以保證這些一定是最常用的功能XD
如果想要更多認識的朋友,老話一句,只能從官方文件下手啦,雖然有些欄位資訊官方好像也還沒有更新(看來大家都一樣,討厭寫文件冏)。接下來我們要一起來看審查面版 (Audits panel) 了,明天見!