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

Question

在 VScode 中，我曾经能够进入 'Run' -> 'Run without debugging'，如果选择了 'Web server (web-javascript)'，Flutter 应用程序将以调试模式打开在 Chrome。这用于为要显示的应用程序打开一个新的 Chrome window。我不确定我做了什么，但这不再有效。我现在在调试控制台中收到以下消息。我试图转到 Chrome 中的本地主机 link，但我只得到一个空白屏幕，并且 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，但是 none 这有帮助，我不知道哪里出了问题。有人能帮忙吗？

如果有帮助，这里是 Flutter doctor 的输出：

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

不得已（也许有人有更好的解决方案）。创建一个新项目并复制 lib。在 pubspec.yaml

中添加任何需要的内容

Answer 2

我必须在升级后重新运行 flutter config --enable-web 才能让它重新工作。然后重启vscode和运行.

Answer 3

我的问题出在位于“web”文件夹中的 index.html 文件中。

错误的原因是我的 <script src="main.dart.js" type="application/javascript"></script> 行。它不在 body 标签的最底部。将它移到底部解决了这个问题。

一般情况下，您可能还需要重新检查 index.html 文件。 body标签内的一般顺序应该是这样的：

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>

Answer 4

对我来说。我所要做的就是确保 Chrome 是默认浏览器。

Answer 5

如果你想运行你的 flutter web 代码在一个特定的端口或者...，你会看到这个错误。

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

您可以从 dart-extention 轻松安装 dart 扩展，并在每次运行您的代码时单击它。

Answer 6

只需使用 flutter 应用程序打开一个新标签页 URL。

Answer 7

对我来说，我使用了一个包含 Android 个构建文件的旧项目。我做了以下

flutter config --enable-web
flutter clean
restarting vscode

问题解决了。

Answer 8

我把flutter升级到3.0v后解决了

flutter upgrade

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

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

emulation

dart

visual-studio-code

flutter