一、基礎(chǔ)弱網(wǎng)模擬：快速適配性能錄制場景

1. 錄制前開啟弱網(wǎng)（推薦，數(shù)據(jù)更精準(zhǔn)）

1. 打開 Chrome 瀏覽器，進(jìn)入目標(biāo)網(wǎng)頁，按下 F12（或 Ctrl+Shift+I/Mac Cmd+Option+I）打開 DevTools。
2. 切換至 Network 面板，找到頂部“Throttling”（節(jié)流）下拉菜單，默認(rèn)顯示“No throttling”（無節(jié)流）。
3. 從預(yù)設(shè)選項中選擇弱網(wǎng)類型：
   1. Slow 3G：模擬偏遠(yuǎn)地區(qū)、地鐵等弱網(wǎng)場景，適合測試移動端核心指標(biāo)表現(xiàn)（如 LCP 是否超過 4 秒）；
   2. Fast 3G：模擬城市邊緣、室內(nèi)弱信號場景，貼近多數(shù)移動用戶日常網(wǎng)絡(luò)環(huán)境；
   3. Offline：模擬斷網(wǎng)環(huán)境，用于測試離線緩存、報錯提示等功能，不適合常規(guī)性能錄制。
4. 保持 Network 面板弱網(wǎng)設(shè)置生效，切換至 Performance 面板，點擊“Record and reload”（錄制并刷新）或“Record”按鈕，開始性能錄制，此時捕獲的數(shù)據(jù)均為弱網(wǎng)環(huán)境下的性能表現(xiàn)。

2. 錄制中切換弱網(wǎng)（適配特定交互場景）

1. Performance 面板點擊“Record”按鈕，開始錄制頁面正常網(wǎng)絡(luò)下的狀態(tài)。
2. 手動切換至 Network 面板，快速選擇目標(biāo)弱網(wǎng)類型（如 Slow 3G），隨即返回頁面執(zhí)行交互操作（如點擊加載更多）。
3. 操作完成后點擊“Record”停止錄制，可在報告中觀察弱網(wǎng)切換后主線程阻塞、資源加載延遲等問題。

二、進(jìn)階配置：自定義弱網(wǎng)參數(shù)（精準(zhǔn)復(fù)現(xiàn)場景）

1. 打開 DevTools 后，切換至 Network 面板，點擊右上角, ⋮ 菜單，選擇“Throttling”→“Custom”→“Add...”。
2. 在彈出的配置窗口中，設(shè)置以下參數(shù)：
   1. Name：配置名稱（如“地鐵弱網(wǎng)”“鄉(xiāng)村 2G”），便于后續(xù)快速調(diào)用；
   2. Download（下載速率）：單位為 kbps/Mbps，如 2G 網(wǎng)絡(luò)可設(shè)為 128 kbps，卡頓弱網(wǎng)設(shè)為 512 kbps；
   3. Upload（上傳速率）：通常低于下載速率，如對應(yīng)下載速率設(shè)為 64 kbps、256 kbps；
   4. Latency（延遲）：單位為毫秒（ms），模擬網(wǎng)絡(luò)傳輸延遲，弱網(wǎng)場景可設(shè)為 100-500 ms，極端場景設(shè)為 1000 ms 以上。
3. 點擊“Add”保存配置，此時在 Network 面板“Throttling”菜單中可看到自定義選項，選中后即可按該參數(shù)模擬弱網(wǎng)，再配合 Performance 面板錄制性能。
4. 參數(shù)參考：模擬 2G 網(wǎng)絡(luò)可設(shè)為“下載 128 kbps、上傳 64 kbps、延遲 300 ms”；模擬跨境弱網(wǎng)可設(shè)為“下載 1 Mbps、上傳 512 kbps、延遲 500 ms”。

三、性能錄制與弱網(wǎng)模擬的協(xié)同技巧

• 搭配 CPU 節(jié)流：弱網(wǎng)場景常伴隨移動端設(shè)備性能不足，在 Performance 面板頂部設(shè)置 CPU 節(jié)流（如 4x slowdown），同時開啟弱網(wǎng)模擬，更貼近中低端手機(jī)的真實體驗，避免僅模擬網(wǎng)絡(luò)忽略設(shè)備性能導(dǎo)致的偏差。
• 禁用緩存：錄制前勾選 Network 面板“Disable cache”，模擬用戶首次訪問場景，避免緩存資源掩蓋弱網(wǎng)下的加載瓶頸（如首屏圖片加載延遲）。
• 鎖定錄制時長：弱網(wǎng)下資源加載耗時較長，錄制時間建議延長至 10-15 秒，確保完整捕獲核心資源加載、交互響應(yīng)全流程，避免遺漏關(guān)鍵性能節(jié)點。
• 多場景對比錄制：分別在正常網(wǎng)絡(luò)、Slow 3G、自定義弱網(wǎng)下錄制性能，對比 LCP、INP 等指標(biāo)差異，精準(zhǔn)定位弱網(wǎng)專屬瓶頸（如正常網(wǎng)絡(luò)達(dá)標(biāo)、弱網(wǎng)下 LCP 超時）。

四、快速操作與避坑要點

1. 命令菜單快速切換弱網(wǎng)

1. 打開 DevTools 后，按下 Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac）調(diào)出命令菜單。
2. 輸入“throttle”，選擇“Network Throttling: Slow 3G”（或其他預(yù)設(shè)/自定義弱網(wǎng)），即可即時啟用，隨后直接開始性能錄制。

2. 常見坑點規(guī)避

• 避免錄制中頻繁切換弱網(wǎng)：多次切換會導(dǎo)致性能數(shù)據(jù)混亂，難以定位問題根源，建議單次錄制僅保持一種弱網(wǎng)配置。
• 區(qū)分“網(wǎng)絡(luò)節(jié)流”與“真實弱網(wǎng)”：DevTools 模擬的是帶寬和延遲限制，無法完全復(fù)刻網(wǎng)絡(luò)波動、丟包等真實場景，若需精準(zhǔn)測試，可搭配 WebPageTest 多節(jié)點測試交叉驗證。
• 錄制后過濾網(wǎng)絡(luò)請求：性能報告中可通過“Network”篩選欄，聚焦弱網(wǎng)下加載耗時久的資源，快速定位瓶頸（如大體積 JS 文件阻塞渲染）。