Not showing response tab under network

[mohitsharma3829]

Dev tool not showing response tab

[kenzieschmoll]

What version of DevTools are you on? @bkonyi will this be fixed with the 2.1.0 release?

[bkonyi]

No, this the same issue we've been having. The full fix should be available once the next Flutter beta goes out.

On Mon, Apr 5, 2021, 9:19 AM Kenzie Schmoll @.***> wrote:

What version of DevTools are you on? @bkonyi https://github.com/bkonyi will this be fixed with the 2.1.0 release?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/flutter/devtools/issues/2860#issuecomment-813481894, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFYWZYEGUYH7VTDAJMZBPRDTHHPKXANCNFSM42MWH55A .

[renntbenrennt]

@kenzieschmoll @bkonyi hi... I know the response tab is buggy since the advent of the dart Dev Tool... but right now it seems the whole network intercepting is not working since the publish of the 2.1.0 version...

I swear to God I have made network request(otherwise my app won't work....)

And we have at least the requesting networking showing in the past version... what's wrong? should I update my Flutter?

Here is the flutter doctor -v

``` [✓] Flutter (Channel stable, 2.0.3, on macOS 11.2.3 20D91 darwin-x64, locale en) • Flutter version 2.0.3 at /Users/benjaminli/software_dev/sdks/flutter • Framework revision 4d7946a68d (3 weeks ago), 2021-03-18 17:24:33 -0700 • Engine revision 3459eb2436 • Dart version 2.12.2 [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) • Android SDK at /Users/benjaminli/Library/Android/Sdk • Platform android-30, build-tools 30.0.2 • ANDROID_HOME = /Users/benjaminli/Library/Android/Sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.4, Build version 12D4e • CocoaPods version 1.10.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.1) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) [✓] VS Code (version 1.55.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Proxy Configuration • HTTP_PROXY is set • NO_PROXY is localhost,127.0.0.1,LOCALHOST • NO_PROXY contains 127.0.0.1 • NO_PROXY contains localhost [✓] Connected device (2 available) • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator) • Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.114 • No issues found! ```

Help.... what's going on... and it seems we can't select which version of the DevTool to use... it just automatically upgrade to the latest when I open the tool....

[bkonyi]

Thanks for the heads up @SeasonLeee, looks like we had a bad version constraint and we're trying to use the new network profiling RPCs when we should be using the original implementation for applications built on the stable branch. We have a fix up in https://github.com/flutter/devtools/pull/2867 and will have a patch released shortly.

[bkonyi]

@SeasonLeee updating to 2.1.1 should fix your issue.

[renntbenrennt]

@bkonyi confirm fix.

and I also have another question, what exactly is this InternetAddress indicating?

on the right panel, its content type is websocket, well, I do have websocket in our project, but it's established by third party package, and actually, the websocket is still working, but this panel only shows this InternetAddress once... assuming this InternetAddress is websocket connection...

anyway, what is it?

[osmanaslancan]

@SeasonLeee Hi! I have the same exact thing that you have and I don't even use or connect to any websocket server. A websocket request always happen after my http requests and it is slowing down my application's request time. Is anyone know why that websocket request happens ?

[GunnarAK]

Network devtools are broken for me as well, even after upgrading Flutter to 2.10.1.

I get api response logs in my console (flutter: Http status error [403]), but the network tab stays empty.

Flutter 2.10.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision db747aa133 (7 days ago) • 2022-02-09 13:57:35 -0600
Engine • revision ab46186b24
Tools • Dart 2.16.1 • DevTools 2.9.2

Flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.1, on macOS 11.6 20G165 darwin-x64, locale en-NL)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] Android Studio (version 2020.3)
[✓] IntelliJ IDEA Community Edition (version 2021.1)
[✓] IntelliJ IDEA Community Edition (version 2021.2.3)
[✓] VS Code (version 1.64.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

[jpangburn]

@GunnarAK Yeah, I'm on 2.10.2 and Network devtools endlessly says "showing 0 of 0 requests" with a spinner going constantly. One thing you can do, if you're developing for the web too, is you can use Chrome DevTools to see your network traffic.

Unfortunately for me, the problem I'm dealing with happens on real device (not emulator or Chrome) so I really would like Flutter network tab to work so I can see what's going on :-(

[bkonyi]

@GunnarAK @jpangburn what APIs are you using to make your network requests?

[jpangburn]

@bkonyi I'm using Firebase. I tried the authentication module against both the local Firebase emulator (http) and against live Firebase (https) with a real device. It doesn't seem to matter if I'm running the Network DevTools tab directly in VSCode or if I run the entire Flutter DevTools in Chrome and have the Network tab open, I have them both open at the same time and neither gets any data. Also tried with iOS simulator pointed at local Firebase emulator, with Network DevTools tab open in VSCode and open in Chrome at the same time- still nothing.

[GunnarAK]

I'm using Dio to make requests to https://api.igdb.com/ I'm developing for iOS and Android.

It worked for me the week prior, but when reopening the project (no new changes) it decided to not show anything. No errors in my console/terminal/VSCode, where-ever.

PS: I'm quite new to Flutter/Dart. Trying to build a relatively simple Flutter application

[bkonyi]

@jpangburn this is using the Flutter Firebase plugins, correct? I'm not 100% sure they're using the Dart HTTP implementation (they might be using the Android/iOS HTTP stacks), and if they're not, the network profiler unfortunately won't know anything about those requests. If that's the case, you should be able to use something like the Network Inspector in Android Studio.

@GunnarAK I'm also not 100% sure if Dio is using the built-in HTTP stack in dart:io. Can I trouble you to share your code for the request so I can build a reproduction case?

[bkonyi]

@jpangburn after giving a quick look at the Firebase plugins, I'm 99% sure that the network requests aren't being made through dart:io, but through the Android networking stack. As far as I can tell, the Firebase plugins are wrapping the native Android/iOS Firebase APIs.

@kenzieschmoll we should document this or investigate what it would take to get network profiling data from the native HTTP stacks into DevTools.

[jpangburn]

@bkonyi yes I’m using the plugins, and I’ve debugged into it before and they are using native platform delegates to connect. Sorry I didn’t know that this network monitor required dart io or it would have been clear why it didn’t work. Would be nice if it worked for the firebase plugins as I imagine they’re pretty popular?

[bkonyi]

@bkonyi yes I’m using the plugins, and I’ve debugged into it before and they are using native platform delegates to connect. Sorry I didn’t know that this network monitor required dart io or it would have been clear why it didn’t work. Would be nice if it worked for the firebase plugins as I imagine they’re pretty popular?

@jpangburn no worries, it's not obvious that those plugins don't use dart:io or that the network profiler depends on dart:io. We definitely want to hook into more native profiling data where we can, but it's not as easy as it sounds, unfortunately. We should do a better job communicating the limitations of the network profiler at the very least... :-)

[jahnli]

@bkonyi Requests I made from Dio programs don't show up in DevTools' network

[jpangburn]

@bkonyi Yes, as you say, it would also be nice if there was some large disclaimer that says "The Network DevTools will ONLY show traffic that comes from dart:io requests- be aware that many plugins may use native code for networking which will not show up here." Otherwise people like @jahnli, myself, and probably many others spend lots of time trying to figure out what they're doing wrong when really we should be using platform specific network monitoring tools. The current page has nothing like that, so new people are left to assume that it will just work.

[aquadesk]

I am not sure but when I restart chrome (on macos) it tentatively works for a short period of time and stops working again. There are definitely some things are going on. I disabled all my chrome extensions just to make sure but no luck. Maybe I can try to restart my computer later but this is definitely hard to reproduce all time.

Thanks

[GunnarAK]

@bkonyi one week prior to my issues with the network inspector it worked. I did not make any changes to my codebase in the meantime. 😓 Due to the network inspector issues I tried upgrading Flutter hoping that would fix the issue. The upgrade was advised by my terminal output when installing the application on my Android device. Below you can find my dio implementation.

dependencies dio: ^4.0.4 json_serializable: ^6.1.4

devDependencies build_runner: ^2.1.7

Note: Network inspector is also empty when installing my app on a iOS simulator.

http_service.dart

import 'package:dio/dio.dart';

// should actually never be saved in git
const clientId = '***';
const accessToken = '***';

class HttpService {
  late Dio _dio;

  HttpService() {
    _dio = Dio(
      BaseOptions(
        baseUrl: 'https://api.igdb.com/v4/',
        headers: {
          "Authorization": "Bearer " + accessToken,
          "Client-ID": clientId,
          "Content-Type": "application/json",
        },
      ),
    );

    initializeInterceptors();
  }

  Future<Response> postRequest(String endpoint, String body) async {
    Response response;

    try {
      response = await _dio.post(
        endpoint,
        data: body,
      );
    } on DioError catch (e) {
      throw Exception(e.message);
    }

    return response;
  }

  initializeInterceptors() {
    // BROKEN: Only onRequest prints log, but onResponse never does??

    // _dio.interceptors.clear();
    // _dio.interceptors.add(
    //   InterceptorsWrapper(
    //     onError: (error, errorInterceptorHandler) {
    //       print(error.toString());
    //       throw error;
    //     },
    //     onRequest: (request, requestInterceptorHandler) {
    //       print("${request.method}: ${request.path}");
    //     },
    //     onResponse: (response, responseInterceptorHandler) {
    //       print(response.data);
    //     },
    //   ),
    // );
  }
}

listings.dart

import 'package:igdb_showcaser/models/listing.dart';
import 'package:igdb_showcaser/models/listing_full.dart';
import 'http_service.dart';

HttpService httpService = HttpService();

Future<List<Listing>> getGameListings() async {
  const requestBody = 'fields name, cover.*, created_at; sort created_at desc;';

  var response = await httpService.postRequest('games', requestBody);

  List<Listing> result =
      (response.data as List).map((i) => Listing.fromJson(i)).toList();

  return result;
}

models/listing.dart

import 'package:igdb_showcaser/models/cover.dart';
import 'package:json_annotation/json_annotation.dart';

// Run command: flutter pub run build_runner build
part 'listing.g.dart';

@JsonSerializable()
class Listing {
  // these values below should be available in json response (https://pub.dev/packages/json_serializable/example)
  int id;
  String name;
  Cover? cover;

  @JsonKey(name: 'created_at')
  int createdAt;

  Listing({
    required this.id,
    required this.name,
    this.cover,
    required this.createdAt,
  });

  factory Listing.fromJson(Map<String, dynamic> json) =>
      _$ListingFromJson(json);
  Map<String, dynamic> toJson() => _$ListingToJson(this);
}

models/cover.dart

import 'package:json_annotation/json_annotation.dart';

part 'cover.g.dart';

@JsonSerializable()
class Cover {
  int id;
  bool alpha_channel;
  bool animated;
  int game; // gameId
  int height;
  String image_id;
  String url;
  int width;
  String checksum;

  Cover({
    required this.id,
    required this.alpha_channel,
    required this.animated,
    required this.game,
    required this.height,
    required this.image_id,
    required this.url,
    required this.width,
    required this.checksum,
  });

  factory Cover.fromJson(Map<String, dynamic> json) => _$CoverFromJson(json);
  Map<String, dynamic> toJson() => _$CoverToJson(this);
}

[AristideVB]

I'm experiencing the same issue certain Network request are displayed inside Devtools but others don't show up

[karelric]

Same issue

[laohanme]

same issue

[sunderee]

Same issue here as well.

[vinothvino42]

I'm having the same issue too

[marko-djukic]

still not fixed...

[rutajdash]

Same issue here as well

[ayberkcal]

same issue :/

[FlorianFlatscher]

here too

[adrienlaurent]

here too

[BaudouinCS]

Still no fix for this? This issue has been going on for a while now.

[CoderDake]

This one is next on my list. I'm just finishing up another big task and then will be digging into this :)

[lifenautjoe]

Hey @CoderDake we're pretty much building blindfolded right now because of this.. Is it already on the works?

[bkonyi]

This issue is being actively worked on. Thank you for your patience!

[CoderDake]

I've got a whole bunch of fixes that I'm polishing up for code review :D Should have them up soon

[CoderDake]

If you want to follow along, the following items will track the progress of some relevant items that may address topics being discussed here . (Many seperate issues have been described above so I'm trying to address the main pain points first)

Step 1: I'll be getting this breaking change merged into the dart sdk

Step 2: I will then be able to bring through https://github.com/flutter/devtools/pull/5056, which addresses a handful of the issues that this issue is bringing up.

Step 3: We will be able to see if there are any remaining issues after these first glaring issues have been addressed.

[iliyaZelenko]

I ended with https://github.com/kdzwinel/betwixt

[CoderDake]

Progress Update

Once https://dart-review.googlesource.com/c/sdk/+/279122 is merged, and then makes it into a flutter candidate roll, I will be able to bring through https://github.com/flutter/devtools/pull/5105 which should address some of the issues around missing network requests.

I will then be able to follow up with https://github.com/flutter/devtools/pull/5056 which includes some other nice fixes and changes that will hopefully address some of the main issues with the Network tab :D

[CoderDake]

Update: I've got the dart sdk change ready to submit. When submittting it the first time it caused some regressions in devtools.

I'm not looking to make a change in devtools that will allow us to merge these fixes :)

[CoderDake]

In case anyone needs a workaround while waiting for all of the changes to get through, you can run flutter from your desktop. Hopefully that can help some people.

I ended up posting some instructions here: https://github.com/flutter/devtools/issues/5194#issuecomment-1419408378

[CoderDake]

Small update: I'm just waiting for the new flutter candidate to be posted and I'll be able to bring the rest of the QOL fixes through.

I will update here when that happens :)

[CoderDake]

Networking fixes now on Flutter master

Great news all of the changes are now through to flutter master :D Specifically, Devtools 2.22.1 has the following network fixes:

• Fixes duplicate requests
• Improved Response and Request tab behaviour
  • more consistent data loading
  • more consistent copy and paste behaviour
• Improved performance of the network tab.
• Fixed missing network requests as a result of integer overflow for their ids

Hopefully these address the bulk of issues that anyone might have been having on the network tab.

What's next?

Since there are a lot of big sweeping fixes I'm going to close this issue and a bunch of other related Networking issues. If you continue to find issues with the network tab, or if you find new ones, then feel free to open up new issues where we can try to sus out what might be going on.

I'm hope these changes make a positive impact :D

[VanLong-official]

@CoderDake It still not work in Devtools 2.22.1

[ppshobi]

same flutter request and reponse tabs are empty

[CoderDake]

@VanLong-official I've created a new issue for us to discuss your response tab issue: The new issue is: https://github.com/flutter/devtools/issues/5314

[CoderDake]

@VanLong-official (or any others who are having this issue) if you are still having issues, and have some time to collect some logs, I have a new branch I'm putting together.

If you follow the instructions on this open ticket, then perhaps the logs will help point towards the issue we are running into.

[MarcusHolanda1]

@CoderDake It still not work in Devtools 2.22.1

i get same error

[CoderDake]

@MarcusHolanda1 if you toggle developer tools in VSCode do you see any relevant errors in the console?

[cheny-github]

flutter --version Flutter 3.10.4 • channel stable • https://github.com/flutter/flutter.git Framework • revision 682aa387cf (2 weeks ago) • 2023-06-05 18:04:56 -0500 Engine • revision 2a3401c9bb Tools • Dart 3.0.3 • DevTools 2.23.1

flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.10.4, on macOS 13.4 22F66 darwin-arm64, locale zh-Hans-CN) [!] Android toolchain - develop for Android devices (Android SDK version 31.0.0) ✗ cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest" See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run flutter doctor --android-licenses to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.3) [✓] VS Code (version 1.79.2) [✓] Connected device (3 available) [✓] Network resources

! Doctor found issues in 1 category.

在chrome浏览器中 我无法查看network 请求的 response返回

[kenzieschmoll]

How are you launching DevTools? the flutter --version output says DevTools 2.23.1 but the screenshot looks like an older version of DevTools. DevTools 2.23.1 had a large design update to material 3 that your screenshot does not reflect, so I wonder if you seeing a stale version of DevTools somehow.