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

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

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

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

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

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

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

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

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

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

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

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

使用總覽

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

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

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

圖 3 : HTTP 請求列表裡只剩下一個請求

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

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

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

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

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

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

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

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

小結

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