Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

flutter web crash on opening browser for debugging

I'm using Android Studio, when I run the project on chrome or edge I see the splash screen, and then, usually I see this:

EDIT - happened after adding await Firebase.initializeApp();

enter image description here

like image 593
Rony Tesler Avatar asked May 28 '21 16:05

Rony Tesler


People also ask

Can flutter run on Web browser?

Flutter web apps can run on the following browsers: Chrome (mobile & desktop) Safari (mobile & desktop) Edge (mobile & desktop)

How do I stop flutter debugging?

To remove the Flutter debug banner, there are several possibilities: The first one is to use the debugShowCheckModeBanner property in your MaterialApp widget. And then do a hot reload. The second possibility is to hide debug mode banner in Flutter Inspector if you use Android Studio or IntelliJ IDEA.

Can I run flutter on Chrome?

If Chrome is installed, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app. In your IDE, you should see Chrome (web) in the device pulldown.

Why use flutter on the web?

Easily reach more users in browsers with the same experience as on mobile devices through the power of Flutter on the web. Share your Dart code between mobile and web applications; web is just another device target for your app. Acquire users beyond app stores without limitations from just a click of a URL in a web browser.

How do I debug Flutter apps?

Another useful debugging tool is logging. You set logging up programmatically then view the output in the DevTools logging view, or in the console. Flutter was designed with a layered architecture that includes widget, rendering, and painting layers.

How to use Dart debug extension in flutter?

Please click the Dart Debug extension button in the spawned browser window you can easily install dart extension from dart-extention and click on it every time you run your code. For me. All I had to do was to make sure that Chrome was the default browser. Simply open a new tab with the flutter app URL.

How to fix flutter config --enable-web after upgrade?

I had to rerun flutter config --enable-web after an upgrade to get it working again. Then restart vscode and run. Last resort (maybe someone has a better solution). Make a new project and copy the lib across. Add anything needed in the pubspec.yaml if you want to run your flutter web code in a specific port or..., you will see this error.


3 Answers

Muting all breakpoints and then running Debug worked for me.

Mute Breakpoints

like image 124
Nick Scherer Avatar answered Oct 23 '22 02:10

Nick Scherer


I had this issue but “flutter clean” solved it.

like image 20
smb8mm Avatar answered Oct 23 '22 03:10

smb8mm


I've had this problem as well, although it is not a solution (seems a problem with the web dev tools to me) a workaround appears to be to remove or mute your breakpoints before running debug!

I've been struggling with this problem for months. I isolated the cause, like you, to an external package but in my case, it was AWS Amplify but I believe they cause some Javascript issue/conflict with the debug tools.

So, as long as at the point you run the project in debug there aren't any active breakpoints it appears to run ok. You can then add your breakpoints afterwards. As mentioned if you don't want to reset your breakpoints each time, muting them before running the project in debug also works if your IDE allows.

It would be interesting to hear if this works for others as it seems to work for our team on both Windows and Mac debugging in Chrome with Android Studio.

like image 1
TimMutlow Avatar answered Oct 23 '22 02:10

TimMutlow