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

【问题标题】：How to debug or print in Flutter web?如何在 Flutter web 中调试或打印？
【发布时间】：2020-03-06 05:56:46
【问题描述】：

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

我可以运行项目的唯一方法是在 web-server 模式下使用以下命令并在AlertDialog popup 中显示变量值和异常！：

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

谁能告诉我解决办法？

【问题讨论】：

标签： debugging flutter flutter-web

【解决方案1】：

目前不可能，Flutter Web 仍处于 Tech-Preview 版本，甚至还不是 Beta。在 11 月底之前，您可以期待有关此功能的一些更新：https://github.com/Dart-Code/Dart-Code/issues/1773

【讨论】：

当我开始这个项目时，只有几页还可以，至少在 Chrome 模式下运行时打印效果很好，但我不知道为什么现在它们都不起作用了。跨度>

【解决方案2】：

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

【讨论】：

【解决方案3】：

在适用于 Flutter beta v1.17.0 及更新版本的 Android Studio 上进行调试

对于旧版本，请使用：Flutter beta v1.14.6

如果还是不行，可以运行flutter clean

升级：android studio 中的 dart、flutter 插件

【讨论】：

【解决方案4】：

Flutter Channel beta, 1.18.0-11.1.pre

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

为此，您需要从下拉列表中选择 Chrome (web)。网络服务器 (web) 不适合我。

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

打开 Chrome 的开发者工具。
点击加号按钮或其他任何内容以达到您的呼吸点。
在 Chrome 中检查 Dart 代码。

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

【讨论】：

【解决方案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 应用程序。

【讨论】：

必须在配置中添加 "deviceId": "chrome" 才能使其工作。