devtools icon indicating copy to clipboard operation
devtools copied to clipboard
verified publisher icon flutter

Unable to access Api Information in Network Tab

Open PrasadMusini-Dev opened this issue 4 months ago • 9 comments

<-- Please describe your problem here. Be sure to include repro steps. -->

DevTools version: 2.34.3 IDE: VSCode Connected Device: CPU / OS: arm64 (64 bit) android Connected app type: Flutter native (debug build) Dart Version: 3.7.0 Flutter Version: 3.29.0 / stable Framework / Engine: 35c388afb5 / f73bfc4522

Sometimes I get Api information in the network tab like this Request uri: 182.18.157.215 Method: GETStatus: 101 Port: 80 Content type: websocketSocket id: -5476376616107973456 Socket type: tcp Read bytes: 1615 Write bytes: 134

PrasadMusini-Dev avatar Aug 26 '25 06:08 PrasadMusini-Dev

Same problem here after update, the "network" tab is always empty.

DevTools version: 2.48.0 Connected Device: CPU / OS: arm64 (64 bit) android Connected app type: Flutter native (debug build) Dart Version: 3.9.2 Flutter Version: 3.35.3 / stable Framework / Engine: a402d9a437 / ddf47dd3ff\

alfonsotesone avatar Sep 08 '25 14:09 alfonsotesone

@PrasadMusini-Dev @alfonsotesone Could you provide more details and repro steps here to help us debug? Thanks!

FYI @srawlins

elliette avatar Oct 08 '25 23:10 elliette

@PrasadMusini-Dev @alfonsotesone Could you provide more details and repro steps here to help us debug? Thanks!

FYI @srawlins

I didn’t do anything special:

  1. I opened Visual Studio Code on my MacBook Pro.
  2. Launched the simulator (the issue happens on both Android and iOS) using Command + Shift + P → Launch Emulator.
  3. Ran the project using the flutter run command.
  4. Opened Google Chrome from the execution shell using the "v" shortcut.
  5. In Chrome, I opened the Network tab and made sure the red recording dot was active in the top-left corner.

However, even though HTTP requests are being made, nothing shows up in the Network tab.

Thanks in advance for your help!

alfonsotesone avatar Oct 09 '25 08:10 alfonsotesone

I'm probably misunderstanding, but I don't see Flutter DevTools in these steps.

  1. Opened Google Chrome from the execution shell using the "v" shortcut.

I might be unfamiliar with VS Code or something. But what is the "execution shell?" What is the "v" shortcut? What website does this open in Google Chrome?

  1. In Chrome, I opened the Network tab and made sure the red recording dot was active in the top-left corner.

I'll give the benefit of the doubt that step 4 opens Flutter DevTools, but I'm unfamiliar with these steps.

srawlins avatar Oct 09 '25 15:10 srawlins

I'm probably misunderstanding, but I don't see Flutter DevTools in these steps.

  1. Opened Google Chrome from the execution shell using the "v" shortcut.

I might be unfamiliar with VS Code or something. But what is the "execution shell?" What is the "v" shortcut? What website does this open in Google Chrome?

  1. In Chrome, I opened the Network tab and made sure the red recording dot was active in the top-left corner.

I'll give the benefit of the doubt that step 4 opens Flutter DevTools, but I'm unfamiliar with these steps.

You're absolutely right — sorry for the lack of clarity in my previous explanation!

In step 4, when I mentioned opening Google Chrome from the execution shell using the "v" shortcut, I meant that this opens Flutter DevTools in the browser.

In step 5, the red recording dot I referred to is the Network recording indicator in Chrome DevTools — it’s the red circle shown in the screenshot below.

Image

Thanks for catching that! I've updated my notes to make this clearer.

alfonsotesone avatar Oct 09 '25 16:10 alfonsotesone

In step 5, the red recording dot I referred to is the Network recording indicator in Chrome DevTools — it’s the red circle shown in the screenshot below.

Small but important distinction: This red dot is in Flutter DevTools (this is the appropriate issue tracker for that product).

Thanks for the clarifications.

Unfortunately, we have unit tests and I have manual testing where I see logging show up in the Network panel. So there must be something about your specific app or requests causing the problem. We have fixed some Network panel issues in both Flutter 3.32 and Flutter 3.35. Please try these newer releases.

srawlins avatar Oct 09 '25 17:10 srawlins

In step 5, the red recording dot I referred to is the Network recording indicator in Chrome DevTools — it’s the red circle shown in the screenshot below.

Small but important distinction: This red dot is in Flutter DevTools (this is the appropriate issue tracker for that product).

Thanks for the clarifications.

Unfortunately, we have unit tests and I have manual testing where I see logging show up in the Network panel. So there must be something about your specific app or requests causing the problem. We have fixed some Network panel issues in both Flutter 3.32 and Flutter 3.35. Please try these newer releases.

I’ve tested the Network panel in Flutter DevTools with several different apps — both ones I’ve developed myself and sample apps from the web — as well as using different emulators and physical devices. Unfortunately, the issue occurs in all cases.

alfonsotesone avatar Oct 10 '25 09:10 alfonsotesone

Thanks for the details. Let us know if you try on newer Flutter releases.

srawlins avatar Oct 10 '25 14:10 srawlins

Thanks for the details. Let us know if you try on newer Flutter releases.

Hi! I’ve updated everything using flutter upgrade, and the situation has improved — however, the Network tab still doesn’t always work. Sometimes it does, sometimes it doesn’t. I haven’t been able to find a consistent workflow to reproduce the issue. I’m attaching a video that shows the problem.

https://github.com/user-attachments/assets/e7803a03-9d96-4447-be84-82c9a34f1ffa

alfonsotesone avatar Oct 17 '25 12:10 alfonsotesone