跳到主內容

使用 Network 檢視

如何使用 DevTools 網路(Network)檢視。

它是什麼?

#

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

Screenshot of the network screen

記錄哪些網路流量?

#

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

對於使用瀏覽器傳送請求的 Web 應用,我們建議使用瀏覽器自帶的工具(例如 Chrome DevTools)來檢查網路流量。

如何使用

#

當你開啟 Network 頁面時,DevTools 會立即開始記錄網路流量。要暫停或恢復記錄,請使用(左上角的)暫停 (Pause)恢復 (Resume) 按鈕。

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

從表格(左側)中選擇一個網路請求,即可在(右側)檢視詳細資訊。你可以檢查關於該請求的常規資訊和時間資訊,以及響應和請求的標頭 (Headers) 與正文 (Bodies) 內容。某些資料在收到響應之前是不可用的。

搜尋和過濾

#

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

Screenshot of the network screen

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

Screenshot of the network screen

過濾查詢語法在對話方塊中有描述。你可以按以下鍵過濾網路請求:

  • method, m:此過濾器對應“Method”列中的值
  • status, s:此過濾器對應“Status”列中的值
  • type, t:此過濾器對應“Type”列中的值

任何未與可用過濾鍵配對的文字都將針對所有類別(方法、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,或者如果你是從 CLI 啟動的應用,則透過命令列打印出的連結開啟。
  3. 導航到 Network 螢幕並確保已開始記錄。
  4. 恢復你的應用。 Network 螢幕上應用恢復體驗的截圖
  5. Network 分析器現在將記錄來自你應用的所有網路流量,包括應用啟動時的流量。

其他資源

#

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

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