如何模擬 Edge 上的慢速網路狀況並分析一切

像網路連線較差的使用者一樣測試網站 確保網路緊張時體驗不會中斷是關鍵。 微軟邊緣 您可以使用原生工具來模擬高延遲、低頻寬、丟包甚至離線的情況。無需安裝任何額外工具，直接從 DevTools 即可實現。

在本實用指南中，我將向您展示如何在 Edge 中模擬慢速網絡 使用「網路條件」工具和「網路」選項卡，以及檢查、過濾、排序和匯出請求所需的一切。您還將了解如何停用快取、欺騙用戶代理、使用 WebSocket、建立自訂限製配置文件，以及輸出乾淨的 HAR 或包含敏感資料的 HAR，而不會留下任何資訊。

在 Edge 上模擬慢速網路狀況意味著什麼？

模擬慢速網絡 這涉及對瀏覽器的連線進行限制，以控制下載、上傳、延遲、遺失和資料包排序。 Edge 將其整合到 DevTools 中，既可以從主網路工具列查看，也可以從「快速檢視」面板中的「網路條件」查看。

Edge 還允許您停用瀏覽器快取。，更改使用者代理字串，並配置客戶端接受的內容編碼（gzip，deflate，br），以複製現實世界的首次存取或相容性場景。

為什麼要這樣做？ 因為網路連線千差萬別：家中的光纖與公共 Wi-Fi、有限的 4G 或擁擠的網路截然不同。延遲 (TTFB) 以及與代理和服務工作線程的協商也起著重要作用。透過模擬各種情況，您將知道需要在哪裡調整您的網站。

快速範圍說明- DevTools 限流會影響該會話中的瀏覽器流量。如果您需要限流 Windows 總體而言，您可以使用 Edge 中非常慢的設定檔來驗證網絡，或使用本指南範圍之外的系統/第三方工具。

入門：開啟 DevTools 並記錄網路活動

右鍵 >「檢查」開啟 DevTools 在任何測試頁面上。前往“網路”工具。開啟 DevTools 後，頁面重新載入時，所有請求都會記錄在「網路」標籤的表中。

• 基本按鈕：您可以停止或復原日誌記錄（Ctrl+E 或 Cmd+E）、清除要求（Ctrl+L 或 Cmd+K）並啟用「保留日誌」以避免在重新載入之間遺失歷史記錄。
• 載入過程中的截圖在右上角的網路設定圖示中，啟用「截取螢幕截圖並按 Ctrl+F5 重新載入」。您將能夠查看縮圖、放大、按時間過濾，並分析使用者在位元組到達時看到的內容。
• 播放 XHR：找到一個 XHR 請求，右鍵單擊它，然後選擇「重播 XHR」（或按 R 鍵）。此功能非常適合在不觸碰頁面 UI 的情況下重複請求，並查看在有或無節流的情況下其影響。

停用瀏覽器快取並更改載入行為

1. 模擬第一次皇室訪問，勾選「網路」標籤頂部的「停用快取」。這樣，您就可以避免從快取中獲取回應，並取得完整的網路標頭和時間。
2. 從網路狀況來看 （更多網路條件按鈕位於「網路」標籤上）如果您希望將快取與限制和用戶代理功能集中管理，也可以啟用「停用快取」。此複選框在 DevTools 處於焦點狀態時有效。
3. 手動擦除：在請求表中，當您需要在測試之間進行清理時，請以滑鼠右鍵並選擇清除瀏覽器快取或清除瀏覽器 Cookies。
4. 上傳之間儲存請求：啟用「保留日誌」功能，即使您重新載入或在路由之間導航，也能維護請求時間軸。這對於 A/B 比較非常有用。

限製網路：無連線、4G/3G預設和自訂設定檔

1. 頂部欄的快速限制：開啟「限制」下拉式選單，然後選擇一個預設，例如「快速 4G」、「慢速 4G」、「3G」或「離線」。 「網路」標籤將顯示一個警告圖標，提醒您限制已啟用。
2. 離線模式：適用於使用 Service Worker 測試 PWA。選擇離線模式，檢查應用程式的回應、快取內容以及哪些應用程式符合快取優先或網路優先等策略。
3. 建立您自己的個人資料：前往“節流”>“自訂”>“新增”，或使用 DevTools 配置 >“節流”>“新增設定檔”路徑。定義名稱、下載速率 (kbps)、上傳速率、延遲 (ms)、封包遺失率 (%)、佇列長度，以及是否需要封包重新排序。一個極端範例：10 kbps 下載/上傳速率，10 ms，1% 遺失率。
4. 應用自訂設定檔：關閉“設定”，返回“網路”選項卡，然後選擇您在“限制”>“自訂”下建立的設定檔。在水淹過脖子的情況下，請查看 TTFB、傳輸大小和下載時間。

WebSocket 也存在限制

限制影響 WebSocket 連接，而不僅僅是 HTTP。設定慢速設定檔並開啟一個使用 WebSocket 的頁面。連線、傳送訊息，然後使用「套接字過濾器」按鈕（WebSocket | WebTransport | DirectSocket）按套接字進行過濾，以隔離連線。

• 訊息選項卡：選擇套接字條目並開啟「訊息」標籤。您將看到傳入和傳出的訊息、其長度（以位元組為單位）以及時間。在節流模式下，您將看到延遲和擁塞對時間戳的影響。
• 框架類型 表格支援：continuation、binary、close、ping 和 pong。它非常適合調試聊天， 流 資料或網路下的即時同步轉換為踏板。
• 評議會將 10 kbps 設定檔與較慢的 4G 網路交替使用，以確保最低限度的可行體驗和合理的體驗。如果應用程式已經在較慢的 4G 網路中遇到問題，則需要進行一些改進。

用戶代理和用戶代理客戶端提示

• 使用戶代理無效在「網路條件」下，取消勾選「使用瀏覽器預設設定」。選擇預先定義的 UA 或輸入您自己的 UA。這對於測試基於 UA 的檢測或依賴伺服器的回應非常有用。
• UA 用戶端提示：在同一部分中，您可以調整品牌和版本（例如 Edge 92）、完整瀏覽器版本、平台和版本（例如 Windows 10.0）、架構（x86）以及裝置型號。這允許您使用現代提示來模擬後端的回應方式。
• 驗證：開啟控制台並評估 navigator.userAgentData 以驗證提示是否反映了設定的值。

設定有效的內容編碼

Edge 允許您定義它接受的內容編碼 使用“驗證內容編碼”選項。實際上，您可以配置內容編碼標頭以支援 gzip、deflate 和 br。伺服器通常會發送壓縮回應，而標頭會指示回應的編碼方式。

為什麼要看它？ 因為它會直接影響慢速網路下的傳輸大小和時間。如果您的伺服器無法正確處理 br 或 gzip，您會在時間軸上看到更大的檔案大小。

像專業人士一樣搜尋、過濾和排序請求

• 全球搜尋：開啟「網路」工具中的「尋找」標籤（Ctrl+F 或 Cmd+F），輸入字串，並根據需要啟用區分大小寫的符合或正規表示式。結果會在表格以及標題或回應中突出顯示。
• 按屬性篩選：使用篩選框篩選包含空格的表達式（它們的作用相當於「與」）。範例：mime-type:image/png large-than:1K、domain:*.com、has-response-header:cache-control、status-code:404、scheme:https、method:POST、url:/api/。
• 可用屬性：cookie-domain、cookie-name、cookie-path、cookie-value、domain、has-overrides、has-response-header、is:running（針對 WebSocket）、larger-than、method、mime-type、mixed-content:all 或mixed-content:displayed、priority、resource-type、response-header-set-cookie、scheme、set-cookie-domain、set-cookie-name、set-cookie-value、status-code、url。
• 按類型篩選：全部、Fetch/XHR、Doc、CSS、JS、字體、圖像、Med 開關 ia、Manifest、WS、Wasm 或其他。您可以按住 Ctrl 或 CMD 直奔主題。
• 更多快速過濾器：隱藏資料 URL（data:）、隱藏擴充 URL（chrome-extension://）、僅顯示來自第三方的被封鎖的請求或被封鎖的回應 cookie（可直接存取 Cookies 標籤和問題工具）。

整理並理解時代的層疊

• 按列排序- 點選表格頭（名稱、狀態、類型、發起者、大小、時間、完成者）進行排序。如果看不到「級聯」列，請以滑鼠右鍵按一下資料表頭新增。
• 高級級聯順序右鍵點選「瀑布」標題，然後選擇「開始時間」、「回應時間」、「結束時間」、「總長度」或「延遲」。點選列標題可切換升序/降序。
• 細分預覽將滑鼠停留在 Cascade 請求列上，即可查看包含佇列、DNS、連線、SSL、代理協商、請求提交、等待時間 (TTFB) 和下載內容的工具提示。啟用大行顯示功能，可同時查看傳輸和解壓縮後的大小。
• 載入事件：DOMContentLoaded 和 load 在「概覽」、「級聯」和「摘要」面板中顯示為垂直線。 DOMContentLoaded 為藍色，load 為紅色。這有助於您查看關鍵事件在瀑布圖中的哪個部分。

按 iframe 分組並檢查啟動器和相依性

• 按幀分組：在「網路設定」中啟用「按幀分組」功能，可以折疊/展開 iframe 及其子請求。當頁面插入大量影格時，此功能非常有用。
• 啟動器和依賴項：按住 Shift 鍵並將滑鼠懸停在某個請求上。您將看到發起該請求的人顯示為綠色，受理者顯示為紅色。您可以按時間順序追溯發起人鏈。

精簡每個請求：預覽、回應、標頭和有效負載

• 預覽：選擇一個請求並開啟「預覽」選項卡，非常適合可渲染的影像或物件。
• 答案：回應選項卡，用於查看到達的正文。對於 JSON，您可以透過右鍵單擊第一行並選擇“複製值”來從“預覽”中複製格式。
• 標頭- 標頭標籤包含「常規」、「早期提示」（如適用）、「回應」和「請求」。選擇“未處理”可查看實際接收順序。如果出現“臨時標頭”，則可能是由於本機快取、無效資源或安全限製造成的。停用快取並重新載入通常會傳回完整的標頭。
• 有效載荷：用於載入查詢字串參數和表單資料的選項卡。使用「檢視原始碼」查看原始表示，並在測試包含特殊字元的參數時在 URL 編碼和 URL 解碼之間切換。

Cookie、大小和實作程序

• Cookies標籤：顯示隨請求發送的 Cookie，並包含詳細欄位。可用於查看 SameSite、Secure、網域和到期日期。在網路工具中，當 Cookie 被政策或瀏覽器設定封鎖時，您將看到通知。
• 傳輸和未壓縮的大小：啟用「大請求行」功能，以便「大小」列以較大的增量顯示傳輸大小，以較小的增量顯示解壓縮大小。這有助於評估壓縮在有限網路條件下的實際影響。
• 由……完成：此列指示回應是由 HTTP 快取還是 Service Worker 提供的。首次測試運行時，建議停用快取以避免時間造假。

分析 WebSocket 和事件流

• WebSocket的在套接字過濾器處於活動狀態的情況下，選擇連線並開啟「訊息」標籤。您將看到最多最近 100 則訊息，包括其方向（上/下）、時間和長度。在節流模式下，這些時間會告訴您網路的歷史記錄。
• EventSource 和串流觸發 SSE 後，您將看到一個 SSE 類型的請求和一個 EventStream 標籤頁，其中的訊息以固定的速率到達。您可以使用正規表示式進行過濾，並使用「清除」按鈕清除訊息。

匯出和匯入：已清理的 HAR 或包含敏感數據

• 全部匯出為 HAR從操作列或右鍵單擊任何請求，選擇“匯出 HAR（已清理）”。此 JSON 格式預設排除 Cookie、Set-Cookie 和 Authorization 等敏感欄位。
• 如有需要，請包含機密在 DevTools 的「設定」>「偏好設定」>「網路」中，選取「允許產生包含敏感資料的 HAR」。這樣，你就可以匯出包含敏感資料的變體了。
• 導入 HAR：將 HAR 檔案拖曳到網路工具表中，或使用「匯入 HAR 檔案」。 Edge 將顯示請求及其發起者，並允許您像即時捕獲請求一樣進行分析。
• 複製到 剪貼板：右鍵單擊請求，您可以複製 URL，例如 cURL（cmd 或 bash），例如 PowerShell的，例如 fetch（瀏覽器或 Node.js），複製回應或堆疊追蹤（如果由 JavaScript 發起）。此外，還可以選擇以相同的格式複製所有或過濾後的回應，以及將所有內容複製為已清理的 HAR 檔案或包含資料。

計數器和儀表板：概述

• 摘要見底部- 摘要面板顯示自您開啟 DevTools 以來的總請求數和總下載大小。請注意，開啟 DevTools 之前的下載不計入。
• 概觀：如果它妨礙了瀏覽，您可以取消勾選「顯示概覽」來隱藏它。我喜歡它能幫助您查看活動峰值以及 DOMContentLoaded 和載入在時間線上的位置。
• 隱藏過濾器面板如果您需要更多空間來放置表格，請使用「篩選」按鈕折疊篩選面板。再次需要時，請重新啟動它。

有限制的實際情況：從 4G 到 10 kbps

• 最低合理測試：使用較慢的 4G 網路並重新載入。注意 TTFB 和級聯載入時間。如果主視覺效果載入時間過長，請檢查關鍵字體、CSS 和 JS，並在伺服器上啟用 br/gzip 壓縮。
• 極限測試：套用 10 kbps、10 ms、1% 丟包率和重新排序的設定檔。沒錯，這確實很麻煩，但它揭示了隱藏的依賴關係、不友善的超時以及不該阻塞的資源。
• 離線 PWA：啟用離線抓取功能，並驗證 Service Worker 儲存空間的路由、快取策略和回退頁面。檢查失敗的抓取請求的行為方式以及是否正確通知使用者。
• 存在延遲的 WebSocket：使用“慢速”配置文件，發送和接收訊息並檢查“訊息”選項卡。如有必要，請調整 ping/pong 間隔、重試次數和指數級重新連接次數。

額外提示：補充工具

• WebPageTest：一款免費的開源服務，可透過選擇位置和瀏覽器來模擬典型條件（56K、3G 等）。它支援進行視訊、內容攔截等基本和進階測試。
• 暈頭轉向：允許您測試 手機網絡 真實世界的基準測試。如果您需要對 1.000 多個網路進行全面的真實性測試和測量，那麼這是一個強大的基準測試。
• 速度曲線：模擬全天路況，評估壅塞造成的變化。這對於了解高峰時段的指標變化非常有用。
• macOS 上的網路連結調節器：Xcode 的一部分，非常適合在 Apple 環境中模擬系統層級的延遲、遺失或故障。

時間階段快速參考指南

• 您將在“時間”選項卡中看到階段：排隊（由於優先順序或 HTTP/6/1.0 中的 1.1 個連線限制）、停滯（由於排隊）、DNS 查找、連線（TCP 和 SSL）、代理協商、請求已傳送、準備並向 ServiceWorker 發出請求、等待 (TTFB) 以及內容下載。在 HTTP/2 中，您也會看到「接收推播」和「讀取推播」（如果適用）。
• 實用解讀：長隊列鼓勵優先考慮資源並減少連接數，高 TTFB 要求優化後端和距離，以及 下載 永恆地啟用壓縮和分區才是真正關鍵的。

介面上的細微調整帶來顯著變化

• 大型請求隊列：在「網路設定」中啟用這些功能，可以一目了然地查看已傳輸的內容和已解壓縮的內容，以及初始優先權和最終優先權。當清單很長時，這可以提供清晰的視野。
• 自訂列右鍵點選表頭可隱藏/顯示列，並根據回應標題新增自訂列。您甚至可以從專用視窗管理標題列。

如果您建立測試流程，其中停用快取、實際限制、按類型過濾，並審查 TTFB、瀑布、有效載荷和 HAR您將獲得關於您的網站在困難情況下表現的真實快照，並且您還將確切地知道即使在網路不暢的情況下如何保持其正常運作。