如何在flutter应用程序中检查网络调用

Question

我正在使用 HTTP 包在 flutter 中进行网络调用，我想知道这些调用得到了哪种类型的响应

Answer 1

在 Flutter 17.1 版本中，他们提供了很酷的功能来检查网络调用，

通过点击 open DevTools 图标（位于 android studio 的调试控制台中）打开开发人员工具，如下图所示

之后，它将安装工具并在浏览器中打开 Dart 开发工具，如下图所示

点击右上角的烧瓶图标（上图中突出显示）， 它会自动刷新页面并在工具栏中显示网络选项，如下图所示

现在您可以检查您的每一个通话

Answer 2

使用 flutter_stetho dart 包检查网络调用

访问 https://pub.dev/packages/flutter_stetho

将其包含到您的包的 pubspec.yaml 中

依赖关系： flutter_stetho:(版本) >> 例如 flutter_stetho: ^0.4.1

注意： 仅基于 dart 版本，选择 Stetho 包版本

• 对于带有 Dart 2.4 的 Flutter 1.7.x，请使用 0.3.0 版本
• 对于带有 Dart 2.5 的 Flutter 1.8.x+，请使用 0.4.0 或更高版本

Answer 3

您可以使用 devtools 网络检查器：

1. 打开命令盘
2. 搜索 openDevToolsNetwork

Answer 4

您可以使用request_inspector来查看您的请求

Answer 5

这是我从网络服务返回酒店列表的示例：

List<Hotel> list = list();
var res = await http.get('http://api-dadepardazan.nikoosoft.ir/api/cms/hotels',
        headers: {"Access-Token": "bt316x312ba44c6183aa81c2ce0d3eff", "Client-Id":"20629heeba32cc87fra6637b257d73"});

    if (res.statusCode == 200) {
      try {

        var data = json.decode(res.body);
        var rest = data["result"];

        for (var model in rest) {
          list.add(Hotel.fromJson(model));
        }
        print('list loaded from web service');     

      } on FormatException catch (e) {
        print("That string didn't look like Json.");
      } on NoSuchMethodError catch (e) {
        print('That string was null!');
      }

    } else {
      print('Failed to call service');
    }

Answer 6

您可以使用 charles 下载这里

现在在真实设备的 wifi 连接中添加代理（模拟器或仿真器无需执行此操作）。

现在执行以下代码以使用 flutter

Dio

包配置设置。

Dio dio = new Dio();
(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate =
      (HttpClient client) {
    client.findProxy = (uri) {
      return "PROXY <Your_PC_IP_Where_Charles_is_running>:8888";
    };
    client.badCertificateCallback =
        (X509Certificate cert, String host, int port) => true;
  };

Answer 7

如果你只是想知道 reponse.body 是什么，我认为当你已经拥有官方 Flutter 开发团队提供的强大的 http 库时，你不需要一个单独的库来检查 Flutter 中的网络调用。

示例代码：

http.get("http://api.urbandictionary.com/v0/define?term=stackoverflow").then((response){
  print("Status Code: ${response.statusCode}");//200 if successful
  print("Response Body: ${response.body}");

  // You can examine the response object either by referring the docs or using he suggestions you get in Android Studio / VS Code

})

Answer 8

检查移动应用程序网络流量的典型方法是通过代理。 Charles Proxy是一个出色的工具。

一旦你设置了 Charles，你实际上不需要任何额外的 Flutter 插件或包来让它工作，但你确实需要设置 Flutter 以通过本地代理进行路由（不幸的是 Flutter 会忽略你的设备设置）：

class MyProxyHttpOverride extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext context) {
    return super.createHttpClient(context)
      ..findProxy = (uri) {
        return "PROXY localhost:8888;";
      }
      ..badCertificateCallback =
          (X509Certificate cert, String host, int port) => true;
  }
}

// In your main.dart
HttpOverrides.global = MyProxyHttpOverride();

当然，您需要将

localhost:8888

更改为您的代理设置。

我还写了一篇关于此解决方案的更详细的文章here。

Answer 9

在iOS上，您可以使用名为Hodor的数据包嗅探应用程序，它允许您直接捕获Flutter的网络数据包，而无需修改任何代码。它还支持捕获 TCP 和 UDP 流量。

https://apps.apple.com/en/app/id1608857736