Flutter web 中如何调试或打印？

Question

我正在使用Flutter 1.10.15和Android Studio 3.5.1用于 Flutter Web 开发和我的大！问题是我无法调试，甚至无法在控制台中打印某些内容，因为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

我终于发现该Google Chrome DevTools功能有一个“控制台”部分，显示Flutter Web在Web-Server模式下运行项目时用的 dart 代码编写的所有打印。这是在Web-Server模式下，Android Studio 控制台中不显示任何打印。

Answer 2

Flutter Channel beta, 1.18.0-11.1.pre

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

• 为此，您需要从下拉列表中选择 Chrome（网络）。网络服务器（web）对我不起作用。

• 点击“调试”按钮并等待新窗口打开。
• 将断点放在 AS 中，而不是在 Chrome 中。

• 打开 Chrome 的开发者工具。
• 点击加号按钮或其他任何按钮来达到你的断点。
• 检查 Chrome 中的 Dart 代码。

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

Answer 3

如果您正在使用VSCode，开放launch.json内.vscode文件夹，并添加以下ARGS：

"--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 应用程序。