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!

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

Abdelrahman Sherif Abdelrahman Sherif · Accepted Answer · 2021-03-07T17:32:23

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>

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

4 Answers