How to debug or print in Flutter web?

Question

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?

score 11 · Accepted Answer · answered Nov 16 '19 at 05:33

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.

score 9 · Answer 2 · answered Sep 17 '20 at 23:18

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.

had to add "deviceId": "chrome" in configurations to get it to work. — guenis, Jul 10 '21 at 12:53

score 6 · Answer 3 · answered May 29 '20 at 11:59

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.

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

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

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

score 0 · Answer 4 · answered Nov 10 '19 at 11:55

0

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

answered Nov 10 '19 at 11:55

dubace

1,601
1
19
27

When I started the project and there were only a few pages it was OK and at least printing worked well in run on Chrome mode, but I don't know why now none of them works. – Mohsen Emami Nov 11 '19 at 05:11

score 0 · Answer 5 · answered May 12 '20 at 19:42

0

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

answered May 12 '20 at 19:42

Adelina

10,915
1
38
46

score -1 · Answer 6 · answered Apr 20 '22 at 12:49

-1

I have same problem.

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

answered Apr 20 '22 at 12:49

Ali Bagheri

3,068
27
28

How to debug or print in Flutter web?

6 Answers6