Flutter web如何調試或打印？

Question

我正在使用Flutter 1.10.15和Android Studio 3.5.1進行 Flutter Web 開發和我的大！ 問題是我無法調試，甚至無法在控制台中打印某些內容，因為當我在工具欄中按“運行”或“調試”按鈕時， chrome中只顯示一個白頁。

我可以運行項目的唯一方法是在 Web 服務器模式下使用以下命令並在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功能有一個“控制台”部分，它顯示了在Web-Server模式下運行項目時用Flutter Web的 dart 代碼編寫的所有打印。 這是在Web-Server模式下，Android Studio 控制台中不顯示打印。

Answer 2

如果您使用的是 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 3

Flutter Channel beta, 1.18.0-11.1.pre

您可以在控制台打印，也可以同時在 Android Studio 和 Chrome 中調試。

• 為此，您需要從下拉列表中選擇 select Chrome (web)。 Web 服務器（網絡）對我不起作用。

• 點擊調試按鈕並等待新的 window 打開。
• 將斷點放在 AS 中，而不是 Chrome 中。

• 打開 Chrome 的開發者工具。
• 點擊加號按鈕或任何點擊你的呼吸點。
• 在 Chrome 中檢查 Dart 代碼。

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

Answer 4

現在不可能，Flutter Web 仍然是技術預覽版，甚至還沒有測試版。 在 11 月底之前，您可以期待有關此功能的一些更新： https://github.com/Dart-Code/Dart-Code/issues/1773

Answer 5

在 Android studio 上調試 web 適用於Flutter beta v1.17.0和更新版本

對於舊版本，請使用：Flutter beta v1.14.6

如果它仍然不起作用，也許運行flutter clean

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

Answer 6

我有同樣的問題。

• 關閉您的項目並重新打開。
• 運行時，將系統連接到 inte.net。