flutter - 为什么我的 Flutter Web 应用调试无法在浏览器中打开？

Question

在 VScode 中，我曾经能够“运行”->“无需调试即可运行”，如果选择了“Web 服务器 (web-javascript)”，则 Flutter 应用程序将在 Chrome 中以 Debug模式打开。这用于打开一个新的 Chrome 窗口以显示应用程序。我不确定我做了什么，但这不再有效。我现在在调试控制台中收到以下消息。我试图转到 Chrome 中的 localhost 链接，但我只看到一个空白屏幕，Chrome 控制台中没有错误。我试过在 Chrome 中下载 Dart 扩展程序，但这没有帮助。

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

到目前为止，我已经尝试重新安装 VScode 和 Flutter，重新安装 Dart 和 Flutter 扩展。我什至尝试卸载 VScode 并删除所有遗留的扩展和设置文件( like mentioned here )。我每次都按照 Flutter 网站上的说明设置 Flutter，但这些都没有帮助，我也不知道出了什么问题。有人可以帮忙吗？
如果有帮助，这里是 Flutter 医生的输出:

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!

Answer 1

我的问题出在位于“web”文件夹中的 index.html 文件中。
错误的原因是我的 <script src="main.dart.js" type="application/javascript"></script>线。它不在 body 标签的最底部。将它移到底部解决了这个问题。
通常，您可能还需要重新检查 index.html 文件。一般订单正文标签内 应该如下:
1-

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

2-(适用于 firebase 用户)Firebase CDN 脚本。前任:<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>3-(Firebase 用户)

<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-(最重要的)确保这一行在 body 标签的底部

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