記錄網(wǎng)絡請求

默認情況下，只要DevTools在開啟狀態(tài)，DevTools會記錄所有的網(wǎng)絡請求，當然，記錄都是在Network面板展示的。

clipboard.png

停止記錄網(wǎng)絡請求

• 點擊Stop recording network log紅色圖標，當它變?yōu)榛疑珪r，表示DevTools不在記錄請求
• 在Network面板下，Command+E(Mac)或者Ctrl+E(Windows,Linux)

clipboard.png

清除網(wǎng)絡請求

clipboard.png

跨頁面加載時，保留網(wǎng)絡請求記錄

當頁面重載或者頁面跳轉時，默認情況下，Network面板下的網(wǎng)絡請求記錄表也是刷新的。如果想保留之前頁面的網(wǎng)絡請求數(shù)據(jù)，可以勾選Preserve log。
常用的一個應用場景：登錄/注冊時會調(diào)用登錄/注冊API，開發(fā)者想查看這個接口返回的情況，但是登錄/注冊成功后一般會跳轉到新的頁面，導致了Network面板的請求記錄被刷新從而看不到登錄/注冊接口返回的情況。此時勾選上Preserve log，無論跳轉到那個頁面，都能在Network網(wǎng)絡請求記錄表中查看到之前接口返回的情況。

clipboard.png

頁面加載時捕獲屏幕截圖

捕獲屏幕截圖可以分析在頁面加載的過程中，用戶在不同的時間段內(nèi)看到的網(wǎng)頁是什么樣子的。
點擊Capture screenshots圖標開啟捕獲功能，當圖標變?yōu)樗{色表示已開啟，重載頁面即可看到不同時間的屏幕截圖。

clipboard.png

捕獲屏幕截圖之后，可以進行以下操作：

• 鼠標懸浮在一張圖片上時，該圖片四周會出現(xiàn)一個黃色的邊框，同時，在Overview和Waterfall窗口里面也分別有一條黃色的豎線，這條黃色的豎線表示這張圖片的捕獲時間

• 點擊某一張圖片，可以過濾掉在這張圖片捕獲之后發(fā)生的所有請求

• 雙擊圖片，可以放大該圖片

clipboard.png

改變頁面加載時的條件

禁用瀏覽器緩存

在http請求的過程中，有些資源在頁面初次加載之后會被緩存到瀏覽器中，也就是那些狀態(tài)碼為304的資源。為了盡可能準確地模擬用戶第一次加載我們網(wǎng)頁時的情景，需要禁用瀏覽器緩存，這樣，每一個請求都是從服務端傳送過來的，較為準確地反應出網(wǎng)頁初次加載的實際情況。

clipboard.png

模擬網(wǎng)速條件

在Network Throttling下拉框中可以選擇不同的網(wǎng)絡條件進行模擬，如2G、3G、4G、WiFi等。

clipboard.png

除了選中已有的網(wǎng)絡選項，也可以自定義網(wǎng)速相關條件：打開Network Throttling菜單，選擇Custom > Add。

另一種模擬情況較為特殊，就是無網(wǎng)絡。利用service workers，PWA(Progressive Web Apps)在無網(wǎng)絡的情況下依然可以使用。模擬這種無網(wǎng)絡環(huán)境，直接勾選Offline即可。

clipboard.png

提示：有時候開發(fā)者會看到Network左側有個警告圖標，這個圖標就是提示開發(fā)者當前處于模擬網(wǎng)絡條件下。

clipboard.png

覆蓋用戶代理

打開Network抽屜面板：在DevTools下，按Esc鍵即可調(diào)出DevTools的抽屜面板，可以選擇、切換不同的Tab選項。

clipboard.png

Network抽屜面板打開以后，不勾選Select automatically復選框，然后選擇一個用戶代理或者自定義一個。

clipboard.png

ps:轉自https://segmentfault.com/a/1190000008407729