'How to debug or print in Flutter web?

I'm using Flutter 1.10.15 and Android Studio 3.5.1 for Flutter Web development and my big! problem is I can't debug and even I can't print something in console because only a white page is displayed in chrome when I press "run" or "debug" button in toolbar.

The only way I can run project is in web-server mode with following command and showing variable values and exceptions in 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

Can anyone tell me a solution?

debuggingflutterflutter-web


Solution 1:[1]

I could finally find that Google Chrome DevTools feature has a "Console" section that shows all prints written in Flutter Web's dart code when running project in Web-Server mode. This is while in Web-Server mode, non of prints are shown in Android Studio console.

Solution 2:[2]

If you are using VSCode, open launch.json inside .vscode folder and add the following args:

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

Here is an example of a complete launch.json file:

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

With this configuration, you can start debugging your Flutter web apps in VSCode, using breakpoints.

Solution 3:[3]

Flutter Channel beta, 1.18.0-11.1.pre

You can print in the console and also debug in Android Studio and Chrome at the same time.

  • In order to do so, you need to select Chrome (web) from the dropdown. Web Server (web) doesn't work for me.

Targer device

  • Hit the Debug button and wait the for the new window to be opened.
  • Put the breakpoint in AS, not in Chrome.

Breakpoint

  • Open Chrome's Developer tools.
  • Hit the plus button or whatever to hit your breatpoint.
  • Inspect the Dart code in Chrome.

Chrome's Developer tools

And btw, print prints in both Chrome's and AS's consoles.

Solution 4:[4]

It's not possible right now, Flutter Web is still in Tech-Preview version, not even Beta. You can expect some updates about this feature till end of November: https://github.com/Dart-Code/Dart-Code/issues/1773

Solution 5:[5]

Debugging on Android studio for web works for Flutter beta v1.17.0 and newer

For older versions use: Flutter beta v1.14.6

If it still does not work, maybe run flutter clean

Upgrade: dart, flutter plugins in android studio

Solution 6:[6]

I have same problem.

  • Close your project and reopen.
  • when run , connect system to internet.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohsen Emami
Solution 2 jpozzi
Solution 3 tottomotto
Solution 4 dubace
Solution 5 Nuts
Solution 6 Ali Bagheri

Related Questions