跳到主內容

使用網路檢視

如何使用 DevTools 網路檢視。

它是什麼?

#

網路檢視允許您檢查來自 Dart 或 Flutter 應用程式的 HTTP、HTTPS 和 WebSocket 流量。

Screenshot of the network screen

記錄了哪些網路流量?

#

所有源自 dart:io(例如 HttpClient 類)的網路流量都會被記錄,包括 dio 包。 此外,使用 http_profile 包記錄的所有網路流量都會記錄在網路請求表中。 這包括來自 cupertino_httpcronet_httpok_http 包的網路流量。

對於使用瀏覽器發出請求的 Web 應用程式,我們建議使用瀏覽器工具來檢查網路流量,例如 Chrome DevTools

如何使用它

#

當您開啟“網路”頁面時,DevTools 會立即開始記錄網路流量。 要暫停和恢復記錄,請使用 暫停恢復 按鈕(左上角)。

當您的應用程式傳送網路請求時,它會出現在網路請求表(左側)中。 在收到完整的響應之前,它顯示為“待處理”。

從表中選擇一個網路請求(左側)以檢視詳細資訊(右側)。 您可以檢查請求的常規和時間資訊,以及響應和請求標頭和正文的內容。 某些資料只有在收到響應後才能使用。

搜尋和過濾

#

您可以使用搜索和過濾控制元件來查詢特定請求或從請求表中過濾請求。

Screenshot of the network screen

要應用過濾器,請按過濾按鈕(搜尋欄右側)。 您將看到一個過濾器對話方塊彈出

Screenshot of the network screen

對話方塊中描述了過濾器查詢語法。 您可以按以下鍵過濾網路請求

  • method, m:此過濾器對應於“方法”列中的值
  • status, s:此過濾器對應於“狀態”列中的值
  • type, t:此過濾器對應於“型別”列中的值

未與可用過濾器鍵配對的任何文字都將針對所有類別(方法、URI、狀態、型別)進行查詢。

示例過濾器查詢

my-endpoint m:get t:json s:200
https s:404

記錄應用程式啟動時的網路請求

#

要記錄應用程式啟動時的網路流量,您可以以暫停狀態啟動應用程式,然後在 DevTools 中開始記錄網路流量,然後再恢復應用程式。

  1. 以暫停狀態啟動您的應用程式
    • flutter run --start-paused ...
    • dart run --pause-isolates-on-start --observe ...
  2. 從您啟動應用程式的 IDE 或從命令列列印的連結開啟 DevTools。
  3. 導航到“網路”螢幕並確保已開始記錄。
  4. 恢復您的應用程式。 網路螢幕上應用程式恢復體驗的螢幕截圖
  5. 網路分析器現在將記錄來自您應用程式的所有網路流量,包括來自應用程式啟動的流量。

其他資源

#

HTTP 和 HTTPS 請求也在 Timeline 中作為非同步時間線事件顯示。 如果您想檢視 HTTP 流量與應用程式或 Flutter 框架中發生的其他事件如何對齊,則在時間線中檢視網路活動可能會很有用。

要了解如何使用 DevTools 監控應用程式的網路流量並檢查不同型別的請求,請檢視一個引導式 網路檢視教程。 該教程還使用該檢視來識別導致應用程式效能不佳的網路活動。