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



在VScode中,我过去可以执行"Run"->'在不调试的情况下运行",如果选择了"Web服务器(Web javascript(",则Flutter应用程序将在Chrome中以调试模式打开。这曾经打开一个新的Chrome窗口,让应用程序在其中显示。我不确定我做了什么,但现在已经不起作用了。现在,我在调试控制台中看到了下面的消息。我试着转到Chrome中的localhost链接,但我只是得到了一个空白屏幕,Chrome控制台中没有错误。我试过在Chrome中下载Dart扩展,但这没有帮助。

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

到目前为止,我已经尝试重新安装VScode和Flutter,重新安装Dart和Flutter扩展。我甚至尝试卸载VScode,并删除所有遗留的扩展名和设置文件(如这里所述(。我已经按照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!

我遇到的问题是位于"web";文件夹

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

通常,您可能还需要重新检查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-(最重要的是(确保这行在主体标签的底部

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

我必须在升级后重新运行flutter config --enable-web才能使其重新工作。然后重新启动vscode并运行。

如果您想在特定端口或…中运行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扩展安装dart扩展,并在每次运行代码时单击它。

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

最后的手段(也许有人有更好的解决方案(。创建一个新项目并跨库复制库。在pubspec.yaml 中添加所需的任何内容

只需使用flutter应用程序URL打开一个新选项卡。

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

flutter config --enable-web
flutter clean
restarting vscode

它解决了问题。

我在将flutter升级到3.0v后解决了这个问题。

flutter upgrade 

为了防止有人在vscode devcontainer中遇到这个问题,我很难弄清楚发生了什么,我尝试了一切,flutter clean,devcontainer的转发端口。只是碰巧我使用的flutter版本出现了问题。我用的是3.6,改为3.9,现在一切都正常。

我得到了一个白色的空白屏幕,调试控制台说这个

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对我有效,尽管我必须手动按"r"来重新加载

如果在web上运行,请检查web控制台。我有一个js函数,它双重声明";索引";。

对我有效的是:

  • 我把Ubuntu上的谷歌浏览器升级到了最新版本(谷歌是你操作系统的最新版本(
  • 重新启动VsCode

最新更新