Add flag to set chrome-specific arguments on flutter run -d chrome

[danielbee]

I currently have to launch chrome with command-line arguments to work around CORS policy stuff.
Mentioned Here:
flutter/flutter#46904 (comment)

Since it's been decided that there won't be any support of additional CORS-specific stuff, a more general solution is to simply allow us to define arguments to send to chrome on launch.

flutter run -d chrome --web-port=8080 --web-hostname=127.0.0.1 --chrome-args="--disable-web-security --user-data-dir='a-temp-location' %*"

This means i don't have to go down the incredibly hacky route of setting CHROME_EXECUTABLE to a batch script which will just add arguments to my original chrome exe.

TBD exactly how to implement the argument passing.

This seems a lot more portable of a solution and would 'just work' in VS code and other IDE's launch.json.

        {
            "name": "Dart/app_test",
            "program": "flutter/app_test/lib/main.dart",
            "request": "launch",
            "type": "dart",
            "args": ["--web-port", "8080", "--web-hostname","127.0.0.1", "--chrome-args", "--disable-web-security --user-data-dir 'a-temp-location"]
        }

Note exact implementation is up for debate. And there's an implied (OS-dependent) %* when adding the --chrome-args.

Also note that developers will find a use for other reasons, not just disabling web security.

[jakemac53]

There is also a web-server device, which leaves the launching of chrome up to you. Is that option sufficient for your use case?

[danielbee]

@jakemac53
Using the web-server device, I was able to also get it working.
"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="a-temp-location" %*
flutter run -d web-server --web-port 8080 --web-hostname 127.0.0.1
Then copy-paste http address into newly opened chrome window.

Is there a way to express this in the launch.json, so that I can have a '1 click' debug routine?

[jakemac53]

I don't know anything about the launch configs, I would file an issue on the relevant issue tracker for your IDE or for vscode you can try the gitter channel https://gitter.im/dart-code/Dart-Code.

[wilmarques]

When trying to develop a Flutter web from Web IDEs like Gitpod, Chrome is usually installed in a Docker instance.
By default, Docker allocates 64MB of shared memory, which is used by Chrome. But Chrome needs more and then hangs up.

The details about it can be seen here: https://developers.google.com/web/tools/puppeteer/troubleshooting#tips.

A solution for this is to keep Chrome from using the shared memory, passing this flag to Chrome executable: --disable-dev-shm-usage.

But as there isn't an easy way to pass these flags to Chrome we usually need to create a shell script or to use web-server, which isn't always a viable solution.

The alternative proposed here could help in this situation.

[itsJoKr]

The proposed workaround with web-server is not good because web-server is removed as an device option. It still works as a hidden device but I'm unable to set up run configurations in Android Studio. flutter/flutter#75088

So I'm stuck here.

[Gustl22]

Supported since Flutter 3.3.0
See flutter/flutter#104935 and flutter/flutter#65575

flutter run -d chrome --web-browser-flag "--disable-web-security"

flutter drive --driver=test_driver/integration_test.dart --target=integration_test/app_test.dart -d web-server --web-browser-flag="--autoplay-policy=no-user-gesture-required"

[atrauzzi]

We need the web-server device option back in the IDE experience. What is the flow for debugging with web-server? There's really an absence of good advice here. It feels rushed.

[Gustl22]

@atrauzzi If you use IntelliJ, you may have a look here: flutter/flutter-intellij#3450

[Gustl22]

@annagrin I think this can be closed, as its available as flutter option (?)

[Gustl22]

@elliette @DanTup do you think this issue is solved with the above PR?

[DanTup]

@Gustl22

I'm not completely familiar with this issue, but as far as I can tell the PR that adds --web-browser-flag seems like it should support the original request. In VS Code you can supply additional args in the launch.json.

@atrauzzi

We need the web-server device option back in the IDE experience. What is the flow for debugging with web-server?

Generally I'd recommend using the Chrome device, because using web-server requires use of the Dart Debug extension so is a little less seamless. That said, you can enable the web-server device in VS Code using this setting:

It is hidden by default unless you're in a remote workspace to avoid some confusion. If you use this in VS Code, we'll still automatically spawn a browser window - but it's done via VS Code's APIs (and not launched by flutter) so that it can work in cases where the flutter tool is not running in your machine (eg. things like Codespaces, Docker, WSL). You don't have to use that browser window, you could close it and re-launch your own (although the PR/flag described above seem like a much easier way to disable CORS for development if that's the goal).

[kymko]

yeah
\

[Gustl22]

@elliette @annagrin once again, this issue can be closed as it is fixed in flutter/flutter#104935