1

I am developing a flutter web app in Anroid Studio. When testing the app and run it from Android Studio, I would like to it to run in Chrome using my current user profile, as this user profile has all necessary passwords stored.

Whatever I try, when runnung the app from Android Studio, Anroid Studio would start a new Chrome instance with an empty Profile. This makes sense, as Android Studio starts a new virtual device which don't have any information on user profiles stored. This makes my developement-test cycles slow because I need to login with my google account credentials each time.

I learned the Anroid Studio Flutter plugin starts Flutter applications using the flutter run command from the Flutter SDK. What I tried so far, is change the Settings in Anroid Studio: Settings > Tools > Web Browsers > Chrome both to use a custom user data directory: "%LOCALAPPDATA%\Google\Chrome\User Data" which I get from typing chrome://version/ in my current chrome browser. and/or to use command line options: --profile-directory=Default

This didn't help, and also the JetBrain Support says, Thanks in advance for your help.

Ömmez
  • 11
  • 4

3 Answers3

2

First of all not the Android Studio is responsible for launching Chrome but a flutter tool.

This tool creates every time a new Profile into a temporary directory as a result all histories/cookies/passwords/etc. are lost whenever a new debugsession is started.

Here we can mess around with Chrome flags, unfortunately I couldn't connect it to internal Chrome profiles (remote debugger couldn't attach to the newly opened Chrome process) however I could connect it to a minimalist Profile which flutter tool uses as a skeleton when it is creates a new Profile.

The trick is to copy this minimalist Profile to a new path (if possible avoid pathes which contains spaces) so it can be reused as many times as you want and shared between multiple flutter web projects.

  1. Go to PROJECT_ROOT\.dart_tool\chrome-device folder if .dart_tool and/or chrome-device folder not exists then run you flutter project with Chrome (web) target so .dart_tool\chrome-device will be generated

  2. Inside PROJECT_ROOT\.dart_tool\chrome-device there should be a folder called Default. Create a new Profile container on your system (mine is at: D:\flutter_chrome_profiles) and copy the Default folder (including the Default folder not just it's content) to the newly created Profile container

This part of answer is based on this answer.

  1. Close Android Studio

  2. Go to flutter\bin\cache and remove a file named: flutter_tools.stamp

  3. Go to flutter\packages\flutter_tools\lib\src\web and open the file chrome.dart

  4. Change this '--user-data-dir=${userDataDir.path}', to your new Profile container's path (mine is: '--user-data-dir=D:\\flutter_chrome_profiles',)

Now every time whenever you lauch any flutter web project your histories/cookies/passwords/etc. will be remained.

If you have a lot of passwords then you should export them and import them into this newly created Profile, you can easily do this if this new Profile is opened by Android Studio.

maRci002
  • 341
  • 3
  • 7
  • Ok cool, I followed your steps and at least, a new chrome browser window with my default Profile opens - when running debug from android studio. Unfortunately it doesn't launch the app, I get the error message: "Launching lib\main.dart on Chrome in debug mode... Waiting for connection from debug service on Chrome... Finished with error: Failed to launch browser. Make sure you are using an up-to-date Chrome or Edge. Otherwise, consider using -d web-server instead and filing an issue at https://github.com/flutter/flutter/issues." My browser is: https://www.whatsmybrowser.org/b/JS76Q – Ömmez Feb 21 '22 at 09:53
  • @Ömmez thanks for the feedback, I could not either connect it to an internal Chrome profile however I could connect it to a custom one, I updated the answer. – maRci002 Feb 21 '22 at 19:19
  • Steps 3 to 6 are not needed. Use arguments to run `flutter run -d chrome --web-browser-flag "--user-data-dir=D:\\flutter_chrome_profiles"`. But thanks anyway. – Falchio Jun 02 '23 at 11:01
  • @Falchio thank you for mentioning that. I remember doing the same in the past. However, in my case, it was ignored. Perhaps, in that particular version of Chrome, the flag was ignored if it was provided twice. – maRci002 Jun 02 '23 at 11:31
  • Its works since Flutter version 3.3 and higher. May be wrong version. – Falchio Jun 02 '23 at 11:50
1

You can run the app using flutter run -d web-server. It will start a local web server and provide you with a URL that you can open in any browser.

$ flutter run -d web-server

Launching lib/main.dart on Web Server in debug mode...
Waiting for connection from debug service on Web Server...         21.3s
lib/main.dart is being served at http://localhost:56153
The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development
workflow.

  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".
David Miguel
  • 12,154
  • 3
  • 66
  • 68
  • Thanks a lot for your answer! That's great. I am wondering, whether it is possible to still use the Android Studio Debugger instead of the Chrome debugger plugin? Maybe the things I want are also possible with the Chrome debugger. So I already realize that hot reloading is working (slightly more effort) by pressing r in the terminal and Reloading the webpage. Stopping the app is also possible by pressing q. But e.g. it seems to not react on the breakpoints I set in Android studio. – Ömmez Feb 11 '22 at 10:54
0

I also needed to keep my Google authentication everytime I wanted to debug the app. The way I did it was to set up persistency by doing the following:

    _auth = firebase_auth.FirebaseAuth.instanceFor(
      app: firebaseApp,
      persistence: firebase_auth.Persistence.INDEXED_DB,
    );

I also had to make this change using authStateChanges(), as for some reason firebase user came as null:

  static Future<User> getFirebaseUser() async {
    //return await auth().currentUser;
    return _auth.authStateChanges().first;
  }

This was recently fixed by FlutterFire, so make sure all the dependencies are updated. I also removed all the scripts from index.html that were previously required.

So, this solves the "lose auth after refresh" problem. Then, every time you close and open Chrome (ie everytime you start debugging from scratch) a fresh new log-in was required. To solve this, you can force the code to run on the same web-port everytime, so it keeps local data in between sessions. Don't forget the -d chrome as it wasn't working previously

flutter run -d chrome --web-port 7357

Since I didn't want to run it from command, I've added a new Run/Debug configuration like in the image below.

enter image description here

Good luck!

Tiago Santos
  • 726
  • 6
  • 13