VS Code does not show Chrome as device for Flutter

Question

I install Flutter and VS Code in the following way:

$ sudo snap install --classic code
$ sudo snap install --classic flutter 
$ export CHROME_EXECUTABLE="/usr/bin/chromium"

$ flutter doctor -v
[✓] Flutter (Channel stable, 2.2.1, on Linux, locale en_AU.UTF-8)
    • Flutter version 2.2.1 at /home/debian/snap/flutter/common/flutter
    • Framework revision 02c026b03c (4 months ago), 2021-05-27 12:24:44 -0700
    • Engine revision 0fdb562ac8
    • Dart version 2.13.1

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /usr/bin/chromium

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Chromium 90.0.4430.212 built on Debian 11.0, running on Debian 11.0

! Doctor found issues in 2 categories.

Unfortunately, VS code does not show me chrome as device:

What did I miss?

Prostrate

I needed to add export CHROME_EXECUTABLE="/usr/bin/chromium" into ~/.bashrc. Now it works. – Prostrate

For me Its brave. adding export CHROME_EXECUTABLE="/snap/bin/brave" in home > ~/.bashrc solved the problem – Heterochromatic

I leave link to answer that seems to be related and should solve/help here: https://mcmap.net/q/1916106/-cannot-find-chrome-try-setting-chrome_executable-to-a-chrome-executable-flutter-2-0 – Whiteman

Answer 1

TL;DR

Add the following line in ~/.profile file (or ~/.bash_profile in some distros) and re-login.

export CHROME_EXECUTABLE="/usr/bin/chromium"

Long answer

For Flutter to be able to find a chromium-based browser other than google-chrome, you need to set $CHROME_EXECUTABLE environment variable to the path of that browser.

The issue is where you set this variable.

When running Flutter manually from a command shell, like bash, the variable needs to be set in that shell session. This can be achieved by just running the export command beforehand, or, as I had wrongly done it, by adding it to your shell's configuration file (e.g. ~/.bashrc).

However, VS Code does not execute flutter via an interactive shell. So files like .bashrc do not get executed in this case. As a result, any logic you've set up there, like exporting $CHROME_EXECUTABLE or extending $PATH, is ignored.

To confirm this, you can execute >Flutter: Run Flutter Doctor in VS Code's Command Palette (Ctrl+Shift+P). The output will show that in VS Code's context, Flutter doesn't see the $CHROME_EXECUTABLE set:

[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

The solution is to define environment variables correctly, rather than only for interactive shells. Ways of doing this are different between Linux distributions. In Arch Linux, what worked for me was to put them in ~/.bash_profile instead of ~/.bashrc. Note that for changes to this file to take effect, you need to re-login into your system. In Ubuntu, ~/.profile might need to be used instead.

For excellent quick explanation on the differences between configuration files, see this answer and others below it.

Antalya

Answer 2

If you are using .zshrc and .zprofile, the steps are similar to what was shared:

sudo nano ~/.zshrc

Then find the browser you want to use as the chrome executable in the Applications folder. Navigate all the way to the executable and then right-click the path at the bottom of the finder to copy as pathname:

In your terminal, paste the path in like this (use double quotes if the path has a space in it):

export CHROME_EXECUTABLE="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

Make sure to source .zshrc after to activate this change:

source ~/.zshrc

Durfee