它是什麼?

#

網路檢視允許您檢查 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 請求也顯示在 時間線 中,作為非同步時間線事件。在時間線中檢視網路活動,如果您想了解 HTTP 流量如何與您應用中或 Flutter 框架中發生的其他事件對齊,會很有用。

要了解如何監控應用的網路流量以及使用 DevTools 檢查不同型別的請求,請參閱本教程:網路檢視教程。該教程還使用該檢視來識別導致應用效能不佳的網路活動。