跳到主内容

使用 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 教程。该教程还使用了此视图来识别导致应用性能不佳的网络活动。