Usage with Flutter web not obvious/documented

[alan-knight]

Trying to use Flutter web and get to DevTools.

• flutter run opens a new Chrome in a new profile. Hitting Alt-D gives a message that debugging is not enabled, pass a webdev --debug flag or see documentation for my product. I see no information on launching devtools from Flutter web, or on passing webdev flags to Flutter.
• debugging into injected client I see this message is coming from an event that has an SSE in there. This looks like it wants the extension, even though it's launched a separate profile and ought to be using the debug port. I can't install the extension, but it's only slightly non-obvious to find the web-server platform for Flutter web.
• Run in my regular browser profile with the extension. Alt-D does nothing. Clicking on the extension tells me there is no Dart application detected.
• The "Debug service listening" message with a URL is not printed, so can't connect directly from Observatory.
• Finally discover, that if I run in VS Code and set up a launch config, then the URL is printed and it will even offer to open devtools for me, though it seems to be only for Flutter-specific things, and using the VS Code debugger.

[grouma]

Trying to use Flutter web and get to DevTools.

flutter run opens a new Chrome in a new profile. Hitting Alt-D gives a message that debugging is not enabled, pass a webdev --debug flag or see documentation for my product. I see no information on launching devtools from Flutter web, or on passing webdev flags to Flutter.

cc @jonahwilliams

I think this was a conscious decision. Flutter Tools can easily update the dwds.start options to support alt + d debugging. At the time the desired workflow was to press v in the Flutter Tools CLI. This would launch DevTools and it would automatically wire things up for you. However, I believe this has changed recently. @kenzieschmoll may know more details here.

debugging into injected client I see this message is coming from an event that has an SSE in there. This looks like it wants the extension, even though it's launched a separate profile and ought to be using the debug port. I can't install the extension, but it's only slightly non-obvious to find the web-server platform for Flutter web.
Run in my regular browser profile with the extension. Alt-D does nothing. Clicking on the extension tells me there is no Dart application detected.

Is this a release or debug build? If it's a debug build then there certainly should be injected metadata that the extension recognizes.

The "Debug service listening" message with a URL is not printed, so can't connect directly from Observatory.

That's not what I'm seeing at head flutter run -d chrome results in this line: Debug service listening on ws://127.0.0.1:53578/dvKg28SzTN8=/ws. I can copy that URL and plug it into a session of Dart DevTools launch with devtools.

Finally discover, that if I run in VS Code and set up a launch config, then the URL is printed and it will even offer to open devtools for me, though it seems to be only for Flutter-specific things, and using the VS Code debugger.

This is expected. The DevTools displayed there should just be the inspector while the debugging portion is expected to be used from VS Code.

[jonahwilliams]

I do not want to support alt-D debugging - the tool is trying to manage the devtools lifecycle, specifically making sure that when the tool is run through an IDE that we re-use the existing devtools instance. It would be nice if we could disable this shortcut entirely

[alan-knight]

Trying to use Flutter web and get to DevTools.
flutter run opens a new Chrome in a new profile. Hitting Alt-D gives a message that debugging is not enabled, pass a webdev --debug flag or see documentation for my product. I see no information on launching devtools from Flutter web, or on passing webdev flags to Flutter.

cc @jonahwilliams

I think this was a conscious decision. Flutter Tools can easily update the dwds.start options to support alt + d debugging. At the time the desired workflow was to press v in the Flutter Tools CLI. This would launch DevTools and it would automatically wire things up for you. However, I believe this has changed recently. @kenzieschmoll may know more details here.

Ah, I didn't realize the flutter CLI had all those options. And I hadn't come across it in documentation. A search for "flutter webv how do I launch devtools" has as the second hit this page, which tells me to run the devtools server manually. https://flutter.dev/docs/development/tools/devtools/cli , and that's the only link on the first page that sounds like it's at all the right thing.

debugging into injected client I see this message is coming from an event that has an SSE in there. This looks like it wants the extension, even though it's launched a separate profile and ought to be using the debug port. I can't install the extension, but it's only slightly non-obvious to find the web-server platform for Flutter web.
Run in my regular browser profile with the extension. Alt-D does nothing. Clicking on the extension tells me there is no Dart application detected.

Is this a release or debug build? If it's a debug build then there certainly should be injected metadata that the extension recognizes.

Debug. But it sounds like the Alt-D isn't enabled, and that's why.

The "Debug service listening" message with a URL is not printed, so can't connect directly from Observatory.

That's not what I'm seeing at head flutter run -d chrome results in this line: Debug service listening on ws://127.0.0.1:53578/dvKg28SzTN8=/ws. I can copy that URL and plug it into a session of Dart DevTools launch with devtools.

Apparent brain failure at my end. I do see that URL printed.

Finally discover, that if I run in VS Code and set up a launch config, then the URL is printed and it will even offer to open devtools for me, though it seems to be only for Flutter-specific things, and using the VS Code debugger.

This is expected. The DevTools displayed there should just be the inspector while the debugging portion is expected to be used from VS Code.

OK, that's working as expected.

[alan-knight]

However, in 2.0.1, when I press 'v' in the CLI, it prints a newline and does nothing else obvious.

[kenzieschmoll]

the 'v' feature has been removed from flutter command line options. For non-web platforms, a link to DevTools is printed to console after the observatory url. This has not yet been implemented for web. We should probably add this to the resident_web_runner.dart like we do in resident_runner.dart @jonahwilliams.

We originally left this off because DevTools web support is not great, so we didn't want to be pointing users to something that doesn't work well. But if we disable the pages in DevTools that do not have robust web support (which we already do for the most part IIRC), we could launch DevTools at app start for web apps just like we do for native apps.

cc @jacob314

[grouma]

There's really no reason why we shouldn't surface DevTools from the command line for Flutter Web. In fact I would prefer that we do so that we may get more error reports.

@jacob314 can you prioritize this work? We should open a tracking issue on the Flutter and or DevTools repository.

[kenzieschmoll]

Filed flutter/flutter#77975.

[grouma]

Great. Closing this one out.