search

flutter / devtools

Performance tools for Flutter
https://flutter.dev/docs/development/tools/devtools/
BSD 3-Clause "New" or "Revised" License
1.53k stars 314 forks source link

Memory/Network Page in blank (DevTools) #7879

Closed JeffreyPSA closed 2 weeks ago

JeffreyPSA commented 1 month ago

When I try to load the memory page or network page from vs code I just get a blank page as shown below: image Also if I try to load the devtools from my web browser (Chrome), the performance tab only shows me this info below image This is a web app and I'm trying running it in debug mode. My flutter version is 3.22.1 devtools version is 2.34.3

I need critically check what's going on with the memory performance of this app, but devtools is not working as an shown.

kenzieschmoll commented 1 month ago

For Flutter web apps, the following tools are supported by Dart DevTools: Inspector, Logging, and Debugger. For all other needs like Performance, Network, or Memory, you should use Chrome DevTools from the Chrome window your web app is running in.

It looks like we are not properly disabling the DevTools screens that are not supported for web from VS code, which is causing some confusion. @DanTup

CC @helin24 since we will need to use the hide= param in the IntelliJ tool window URI to hide the unsupported DevTools screens when connected to a web app.

DanTup commented 1 month ago

It looks like we are not properly disabling the DevTools screens that are not supported for web from VS code, which is causing some confusion. @DanTup

We don't have a great way in VS Code to know all the conditions in which we should enable/disable pages (because users can specify their own flags in a run configuration that could target different devices, modes, etc. or use custom launch scripts). I assume these conditions could (in the future) change between SDK versions.

The most reliable thing may be to have some kind of API (via the server, or a service extension, or DTD) that would allow us to determine which pages are available. Although, in the past I thought DevTools showed a message like "this page isn't available for x" that doesn't appear to be working here - would fixing that be good enough so it's at least clear (in some ways, this might be better than just hiding all of the commands, because a use might wonder why they can't find the command to launch a given page).

CC @helin24 since we will need to use the hide= param in the IntelliJ tool window URI to hide the unsupported DevTools screens when connected to a web app.

Doesn't DevTools already hide the tabs that aren't supported? hide= was originally intended only to hide things that otherwise would be supported (for ex. Debugger). VS Code doesn't use hide= for anything else and expected DevTools to only show what's available.

JeffreyPSA commented 1 month ago

Is there any reason because we can't use Devtools for Flutter web apps? I've been trying to use the Chrome Devtools and consider that it is'nt too specific for examen in wich widget is my problem with my memory, because it is analizyng the javascript files that Flutter use to work, so it is not too friendly for Flutter web apps image As you can see it shows me up the object that have been builded and their sizes but more further would be much better that it's allow me to see the specific widget that is causing the problem I guess. In the next versions are you guys thinking on implement Flutter DevTools for Flutter web apps @kenzieschmoll ? By the way thank you so much for your answers. It's have been really helpfull

helin24 commented 1 month ago

@DanTup I believe in VS Code we show all of the windows separately, right? vs in IntelliJ we're planning to show an embedded browser that features multiple DevTools tabs (e.g. performance, networking, etc. but excluding inspector and extensions). So I think perhaps the hide= param won't be applicable for VS Code.

JeffreyPSA commented 1 month ago

@helin24 @DanTup @kenzieschmoll to contribute your fixes, I had been able to see the Memory page using the ctrl + shift + "P" as shown below image

DanTup commented 1 month ago

@DanTup I believe in VS Code we show all of the windows separately, right?

Yup!

in IntelliJ we're planning to show an embedded browser that features multiple DevTools tabs (e.g. performance, networking, etc. but excluding inspector and extensions).

I see - but doesn't DevTools already support hiding sections that aren't available based on the app it's connected to? Why would they need to be passed on the querystring? (IMO it'd be better to avoid the IDE needing to have hard-coded rules about what pages are available in what situations if they may change over time, or in the case of VS Code, where use config of wrapper scripts might make it hard to know the kind of device we're running on).

@JeffreyPSA

I had been able to see the Memory page using the ctrl + shift + "P" as shown below

Thanks for confirming. This is the location where I'm not sure about hiding it. If you're used to using the memory page for non-web and don't realise it's unavailable for web, it could be more confusing to hide it from this list than the allow you to select it and then show a message saying "The memory page is not currently available when running on web devices" 🤔

JeffreyPSA commented 1 month ago

Will you enable Flutter DevTools for web applications in the future? @DanTup @kenzieschmoll

kenzieschmoll commented 2 weeks ago

Will you enable Flutter DevTools for web applications in the future?

For cases where Chrome DevTools already has developer tooling (like memory, network profiling, etc.) we do not have plans to re-implement this tooling in Flutter DevTools. This is because there is not much value to add beyond what Chrome already provides. For Flutter specific tools that we provide or tools that are low cost to maintain and already work for web apps, these will continue to be supported in Dart & Flutter DevTools (e.g. Inspector, Logging, etc.).

I have pushed up a PR to help with the messaging when certain pages are not supported for the current platform: https://github.com/flutter/devtools/pull/7958