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();
Flutter web apps can run on the following browsers: Chrome (mobile & desktop) Safari (mobile & desktop) Edge (mobile & desktop)
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.
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.
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.
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.
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.
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.
Muting all breakpoints and then running Debug worked for me.
I had this issue but “flutter clean” solved it.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With