Flutter Web: Specify Chrome port number?

[ghost]

Hi
In a Flutter Web project, when I "Start Without Debugging",
a Chrome window opens on a random port

However, to do functional tests, I'd like to specify the port
Is there a config where I can specify that port number?

[DanTup]

It's not currently possible to specify that port from VS Code. I think it should be easy enough to add though. In the meantime, if you start the app manually (by running webdev serve and passing a port - see https://pub.dev/packages/webdev#usage) then hopefully that'll work (you could also do this from a VS Code "task" so you can run it quickly from the IDE).

[DanTup]

Apparently it's not easy to add, it needs support in webdev (the above arguments don't apply to daemon mode).

dart-lang/webdev#424

[DanTup]

This is now possible with Flutter's --web-port argument. You can add it in your launch.json config like this:

{
	"name": "Flutter",
	"request": "launch",
	"type": "dart",
	"args": ["--web-port", "8686"]
},

You could also set it in dart.flutterAdditionalArgs but then it would apply to the whole workspace or all apps (depending on where you set it).

Note: This only works with the unforked web support (which isn't available on the master branch).

[Ollynov]

@DanTup I can specify a port number when I run flutter from command line using flutter run -d chrome --web-hostname localhost --web-port 7357 but then I can't figure out how to use that port automatically from the launch.json. Here is my launch.json... does it all add up? It just launches on a random port.

{
  "version": "0.2.0",
  "configurations": [


    {
      "name": "Dart",
      "type": "dart",
      "request": "launch",
      "program": "lib/main.dart"
    },

    {
      "name": "Flutter",
      "request": "launch",
      "type": "dart",
      "args": ["--web-port", "7357"]
    }
  ]
}

[DanTup]

@Ollynov you appear to have two launch configurations there, so unless you're selecting the second one (named Flutter) on the Run side bar, it won't be having any effect. You an merge these together into a single config that should fix this:

    {
      "name": "Flutter (port 7375)",
      "type": "dart",
      "request": "launch",
      "program": "lib/main.dart"
      "args": ["--web-port", "7357"]
    }

[cladelpino]

Hi, I'm using the following launch.json.

{
    "configurations": [
        {
            "name": "Flutter (Chrome)",
            "program": "lib/main.dart",
            "deviceId": "chrome",
            "request": "launch",
            "type": "dart"
        },
        {
            "name": "Flutter Port 8000",
            "program": "lib/main.dart",
            "deviceId": "chrome",
            "request": "launch",
            "type": "dart",
            "args": ["--web-port", "8000"],
        }
    ]
}

Default configuration works fine. But when launching with the second, the program correctly stops at breakpoints but it doesn't show the call stack or variables, or even the breakpoint in the editor.

Is this a known limitation when specifying port ? Or can I provide more information to help debug this problem ?

[DanTup]

@cladelpino it's not a known limitation - changing the port should not really impact this at all.

Can you file a new issue about this, and include:

• versions of Flutter SDK, Dart extension, VS Code
• whether this occurs on a new project created with Flutter: New Project
• if it repros on a new project, capture logs by:
  • running the Dart: Capture Debugging Logs command
  • run the app (using the broken launch config) and hit a breakpoint to reproduce the issue
  • click Cancel on the logging notification to stop logging and open the log file

Thanks!