iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
0

昨天我們介紹了網路面版的介面,也一起看部份 HTTP 請求列表的功能 (Request row),今天我們要一起來討論總覽 (overview)。

但在開始之前,在面版上方工具列裡還有幾個功能我們還沒有介紹,我們先簡單的一起來看一下:

請先打開開發者工具並切換到網路面版,然後再重新整理頁面一次這樣才會得到完整的頁面資料

  • Capture screenshot capture screenshot 擷圖 : 這個功能打開後,就可以錄下頁面載入時的擷圖,這個擷圖是每隔幾秒就擷一次,所以你可以清楚的看到你的頁面元素載入時的順序。你可以透過這個功能來檢查載入的時候,是不是先把重要的功能 (像是主選單) 先載入了。

capture screenshot 擷圖
圖 1 : capture screenshot 功能打開始所擷取到每隔幾秒的頁面載入圖片

  • Group by frame group by frame 擷圖 : 這是一個新功能,官方文件還沒有更新 XD, 我測試的結果是:它會把同一個網域的請求整理成一個群組,算是方便閱讀吧?

  • Preserve log Preserve log 擷圖 : 這個功能跟之我們介紹控制台面版 (Console panel) 裡的 Preserve log 很類似,在打開後,當你在不同的頁面做切換時, HTTP 請求列表裡的資訊會被保存不會被清掉

  • Disable cache Disable cache 擷圖 : 當開發者工具是打開的時候,每次頁面的重新整理都會清掉所有快取。這是個很實用的功能,開發的時候我會一直打開,這樣可以避免因為有快取,頁面載入後畫面或是功能與你的原始碼不一致的問題。但是記得不用的時候要關掉,沒有快取會讓網頁載入的時間變長。

  • Offline Offline 擷圖 : 關閉網路功能,關閉後會在網路面版上顯示一個警示的小圖示。

  • Online Online 擷圖 : 這個功能是一個下拉選單,預設值是 Online 也就是正常的網路速度,它可以設定成像是 Fast 3G, Slow 3G 這種連線速度,方便做行動裝置載入效能測試。這個功能也有一個自己獨立的區塊,你可以透過右上角三個小點的設定 -> More tools -> Network conditions 來打開它。

Online 下拉選單擷圖
圖 2 : online 下拉選單打開的選項

這個網路速度模擬的功能打開後,跟 Offline 選項一樣,會在網路面版上會顯示一個警示的小圖示network warning 擷圖,這是要提醒你用完記得要關掉,不然接下來每次你載入網頁的速度都會變成模擬的速度 XD

使用總覽

在總覽裡你可以看到你的頁面在載入時每個資源載入的時間及順序。接下來我們就來介紹如何操作:

接下來使用的範例網路是 iT 邦幫忙首頁,但是因著網路連結速度及網站伺服器等許多可能的原因,就算我們使用同一個網頁,每次載入時所花的時間都會不一樣,所以下面提到的範例有可能會與你實際操作時不同

你可以用滑鼠左鍵點一下你想要查看的時間點,假設我們在 6000 ms (也就是6秒) 後這裡點一下,你會發現 HTTP 請求列表裡的項目只剩下一個項目,一張 PNG 圖片,如下圖:
請求列表擷圖
圖 3 : HTTP 請求列表裡只剩下一個請求

我們再往前移動一點到 1000 ms 左右,你會發現在這裡我們有很多的請求,請求的總數量你可以透過下方狀態欄來看。

請求數量擷圖
圖 4 : HTTP 請求列表在 1000ms 有 14 個請求,請求的總數可以在下面看到,我們目前是 14/84 ,前面在這個時間點的請求數量,後面的 84 代表全部頁面載入後的請求總數

我們也可以讓選取的範圍加大,把滑鼠移到目前選取範圍的右邊,這時候你的滑鼠會變可以拖拉的圖示,按住並向右就可以加大範圍,向左拉就可以縮小範圍。這樣子你就可以輕易的查看特定時段的時所載入的資源。

你也可以用滑鼠滾輪來操作:滾輪向前就是縮小目前的選取範圍,向後滾則是加大選取範圍

再來,我們也可以直接移動這個選取範圖,用滑鼠移到那兩個拖拉圖示的中間,就可以拖拉整個選取範圍。

最後,如果你想恢復到查看所有請定列表的狀態,用滑鼠左鍵在總覽上點二下就可以了。

好,我們現在已經學會怎麼操作總覽了,但是這個總覽要要怎麼看呢?好問題(自問自答XD)
總覽裡的每個資源都會有載入的開始時間點還有結束時間點,而載入時間越長的,在總覽裡的時間軸上就拉越長。常常我們來這裡要找出的問題就是,哪一個資源花了最長的時間載入?為什麼?然後再來排除。舉個例子好了,我們前一陣子發現網頁裡某個頁面載入的速度比其他頁面慢很多,我們就透過網路面版來找這個問題,然後很快就發現有一個資源它花了很長的時間載入,它是一張圖片,這張圖片有快 2MB ,所以頁面才花了這麼長的時間載入,而這個圖片是使用者上傳的。後來我們就加入圖片上傳大小限制,這個問題就解決了。

除此之外,像是 XHR 的請求也常常會有奇怪的問題,需要透過這個面版來除錯。

小結

我們今天一起看完了總覽及剩下的幾個工具列上的功能,接下來只剩下 HTTP 請求列表項目及每個請求的詳細內容我們還沒有介紹,明天我們先一起來看請求列表吧!


上一篇
網路面版 - 介面簡介
下一篇
網路面版 - HTTP 請求列表
系列文
認識 Chrome 開發者工具30

尚未有邦友留言

立即登入留言