如何在 Flutter web 中调试或打印？

Question

我正在使用 Flutter 1.10.15 和 Android Studio 3.5.1 进行 Flutter Web 开发和我的大！问题是我无法调试，甚至无法在控制台中打印某些内容，因为当我在工具栏中按 "run" 或 "debug" 按钮时，chrome 中只显示一个白页。

我可以运行项目的唯一方法是在网络服务器模式下使用以下命令并在 AlertDialog 弹出窗口中显示变量值和异常！：

flutter run -d web-server --web-hostname=192.168.50.147 --web-port=5624 --local-engine=host_debug_unopt --profile -v lib\pages\splash.dart

谁能告诉我解决办法？

Answer 1

现在还不行，Flutter Web 还处于Tech-Preview 版本，连Beta 都没有。您可以在 11 月底之前收到有关此功能的一些更新：https://github.com/Dart-Code/Dart-Code/issues/1773

Answer 2

我终于发现 Google Chrome DevTools 功能有一个 "Console" 部分，当运行项目在 [=12] 时，它显示了用 Flutter Web 的飞镖代码编写的所有打印=] 模式。这是在 Web-Server 模式下，Android Studio 控制台中未显示打印件。

Answer 3

在 Android studio for web 上调试适用于 Flutter beta v1.17.0 和更高版本

旧版本使用：Flutter beta v1.14.6

如果还是不行，也许运行flutter clean

升级：android studio

中的 dart、flutter 插件

Answer 4

Flutter Channel beta, 1.18.0-11.1.pre

您可以在控制台中打印，也可以同时在 Android Studio 和 Chrome 中进行调试。

为此，您需要从下拉列表中选择 select Chrome (web)。 Web 服务器 (web) 对我不起作用。

点击“调试”按钮并等待新 window 打开。
把断点放在AS，而不是Chrome。

打开 Chrome 的开发者工具。
点击加号按钮或其他按钮点击断点。
检查 Chrome 中的 Dart 代码。

顺便说一句，print 在 Chrome 和 AS 的控制台中打印。

Answer 5

如果您使用的是 VSCode，请打开 .vscode 文件夹中的 launch.json，然后添加以下参数：

"--web-port=5000"
"--web-enable-expression-evaluation"

这是一个完整的 launch.json 文件示例：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "web",
            "program": "lib/main.dart",
            "request": "launch",
            "type": "dart",
            "args": [
                "--web-port=5000",
                "--web-enable-expression-evaluation"
            ],
        },
    ]
}

使用此配置，您可以在 VSCode 中使用断点开始调试您的 Flutter Web 应用程序。

Answer 6

我有同样的问题。

关闭您的项目并重新打开。
当运行时，将系统连接到互联网。

如何在 Flutter web 中调试或打印？

How to debug or print in Flutter web?

debugging

flutter

flutter-web