Why won't my Flutter web app debug open in the browser?

Question

In VScode, I used to be able to go 'Run' -> 'Run without debugging' and if the 'Web server (web-javascript)' was chosen then the Flutter app would open in debug mode in Chrome. This used to open a new Chrome window for the app to be displayed in. I'm not sure what I've done but this no longer works. I now get the message below showing in the debug console. I have tried to go to the localhost link in Chrome but I just get a blank screen and no errors in the Chrome console. I've tried downloading the Dart extension in Chrome but this doesn't help.

Launching lib\main.dart on Web Server in debug mode...
Waiting for connection from Dart debug extension at http://localhost:51367

So far I have tried reinstalling VScode and Flutter, reinstalling the Dart and Flutter extensions. I've even tried to uninstall VScode and remove all the extension and settings files that get left behind (like mentioned here). I've set Flutter up as the Flutter website says every time but none of this has helped and I have no idea what has gone wrong. Could anyone help?

In case it helps, here is the Flutter doctor output:

Downloading android-arm-profile/windows-x64 tools...                1.7s
Downloading android-arm-release/windows-x64 tools...                0.8s
Downloading android-arm64-profile/windows-x64 tools...              1.2s
Downloading android-arm64-release/windows-x64 tools...              1.3s
Downloading android-x64-profile/windows-x64 tools...                2.2s
Downloading android-x64-release/windows-x64 tools...                1.0s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, 1.20.0-7.3.pre, on Microsoft Windows [Version 10.0.18362.959], locale en-GB)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] VS Code (version 1.47.3)
[√] Connected device (2 available)

• No issues found!

Rodgerrodgers

Did you find any solutions? – Become

Try upgrading Flutter and if not try copying the code to a new project (last resort) – Rodgerrodgers

# Firebase Error # For me this helped #64918244 – Lavatory

Answer 1

Last resort (maybe someone has a better solution). Make a new project and copy the lib across. Add anything needed in the pubspec.yaml

Rodgerrodgers

If create new project work, maybe flutter clean work as well – Salsbury

Answer 2

The problem for me was in the index.html file located in the "web" folder.

The cause for the error was my <script src="main.dart.js" type="application/javascript"></script> line. It was not at the very bottom of the body tag. Moving it to the bottom fixed the issue.

You might also need to re-check the index.html file in general. The general order inside the body tag should be as follows:

1-

 <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>

2- (applies to firebase users) Firebase CDN scripts. ex:

<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>

3- (Firebase users)

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "<your api key>",
    authDomain: "<your auth domain>",
    projectId: "<Your project id>",
    messagingSenderId: "<your messaging sender id>",
    appId: "<your app id>"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

4- (most importantly) Make sure this line is at the bottom of the body tag

<script src="main.dart.js" type="application/javascript"></script>

Condemnation

This is a prefect tip for firebase users. thank you :) – Grondin

What about code I add for the splash screen? Where in body should it be located? – Radiative

Hi Rony, I have not implemented a splash screen for web before. I believe this can be easily solved using trial and error? – Condemnation

I referred to this answer https://mcmap.net/q/487693/-flutter-web-app-progress-indicator-before-loading-app – Condemnation

Thank you so much for this. I would never has found this without this post. – Indefatigable

Saved me a big headache thanks! – Adrianople

only 4th point worked for me – Shults

@UjjawalMaurya Glad it worked. These are not options, these are steps. It can be that the first three steps are already correct for you – Condemnation

Answer 3

I had to rerun flutter config --enable-web after an upgrade to get it working again. Then restart vscode and run.

Freesia

Answer 4

Simply open a new tab with the flutter app URL.

Kirchner

Even opening in incognitodid not work – Amritsar

Worked for me! Thanks. Wondering why didn't i try that myself – Nonresident

Answer 5

For me, I used an old project that has Android build files. I did the following

flutter config --enable-web
flutter clean
restarting vscode

It solved the problem.

Trilly

You are godlike !!! thanks a lot – Cornflower

Answer 6

if you want to run your flutter web code in a specific port or..., you will see this error.

The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development workflow.
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.

Prolate

Answer 7

For me. All I had to do was to make sure that Chrome was the default browser.

Dormant

Answer 8

I solved it after upgrading flutter to 3.0v.

flutter upgrade 

Talkfest

Answer 9

Just in case anyone has facing this issue in vscode devcontainer, I had a hard time trying to figure out what was happening, I tried everything, flutter clean, forwarding port in devcontainer. It just happened that the version of flutter that i was using had the issue. I was using 3.6 and change to 3.9, everything is working right now.

Kareem

Answer 10

I was getting a white blank screen and debug console said this

Running "flutter pub get" in flutter_application_1...
Launching lib/main.dart on Web Server in debug mode...
lib/main.dart:1
Waiting for connection from Dart debug extension at http://localhost:42207
The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development workflow.
Please click the Dart Debug extension button in the spawned browser window

flutter run -d web-server in cmd line worked for me though I have to press 'r' manually to reload

Amritsar

Answer 11

If running on the web check the web console. I had a js function that double declared "index".

Korykorzybski

Answer 12

What worked for me was:

• I upgraded Google Chrome on my Ubuntu to the newest version (google the newest version for your OS)
• Restarted VsCode

Inhambane

Answer 13

I was having this problem and a break on line "ui_web.bootstrapengine" in web_entrypoint.dart

The issue was that I was attempting to use the package google_mobile_ads while running for web -- which are incompatible at this time.

Removing google_mobile_ads references from the code and pubspec.yaml fixed the issue.

Honeycomb

Answer 14

This happened with me as well. The reason was that I downloaded a zip from my friend's github repo and modified index.html file as it was giving out some errors in the output logs. the best option, so far, is to migrate all your project into new empty project and configure it for use. OR undo all the modification that you have done inside any of the flutter web files.

Perce

Answer 15

If you are using VPN, please disconnect/logout. And try again. It will work in my experience.

Britain