使用网络视图
如何使用 DevTools 网络视图。
它是什么?
#网络视图允许您检查来自 Dart 或 Flutter 应用程序的 HTTP、HTTPS 和 WebSocket 流量。
记录了哪些网络流量?
#所有源自 dart:io(例如 HttpClient 类)的网络流量都会被记录,包括 dio 包。 此外,使用 http_profile 包记录的所有网络流量都会记录在网络请求表中。 这包括来自 cupertino_http、cronet_http 和 ok_http 包的网络流量。
对于使用浏览器发出请求的 Web 应用程序,我们建议使用浏览器工具来检查网络流量,例如 Chrome DevTools。
如何使用它
#当您打开“网络”页面时,DevTools 会立即开始记录网络流量。 要暂停和恢复记录,请使用 暂停 和 恢复 按钮(左上角)。
当您的应用程序发送网络请求时,它会出现在网络请求表(左侧)中。 在收到完整的响应之前,它显示为“待处理”。
从表中选择一个网络请求(左侧)以查看详细信息(右侧)。 您可以检查请求的常规和时间信息,以及响应和请求标头和正文的内容。 某些数据只有在收到响应后才能使用。
搜索和过滤
#您可以使用搜索和过滤控件来查找特定请求或从请求表中过滤请求。
要应用过滤器,请按过滤按钮(搜索栏右侧)。 您将看到一个过滤器对话框弹出
对话框中描述了过滤器查询语法。 您可以按以下键过滤网络请求
method,m:此过滤器对应于“方法”列中的值status,s:此过滤器对应于“状态”列中的值type,t:此过滤器对应于“类型”列中的值
未与可用过滤器键配对的任何文本都将针对所有类别(方法、URI、状态、类型)进行查询。
示例过滤器查询
my-endpoint m:get t:json s:200
https s:404
记录应用程序启动时的网络请求
#要记录应用程序启动时的网络流量,您可以以暂停状态启动应用程序,然后在 DevTools 中开始记录网络流量,然后再恢复应用程序。
- 以暂停状态启动您的应用程序
flutter run --start-paused ...dart run --pause-isolates-on-start --observe ...
- 从您启动应用程序的 IDE 或从命令行打印的链接打开 DevTools。
- 导航到“网络”屏幕并确保已开始记录。
- 恢复您的应用程序。

- 网络分析器现在将记录来自您应用程序的所有网络流量,包括来自应用程序启动的流量。
其他资源
#HTTP 和 HTTPS 请求也在 Timeline 中作为异步时间线事件显示。 如果您想查看 HTTP 流量与应用程序或 Flutter 框架中发生的其他事件如何对齐,则在时间线中查看网络活动可能会很有用。
要了解如何使用 DevTools 监控应用程序的网络流量并检查不同类型的请求,请查看一个引导式 网络视图教程。 该教程还使用该视图来识别导致应用程序性能不佳的网络活动。