How to debug or print in Flutter web?

10,595

Solution 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

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

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.

Share:
10,595
Mohsen Emami
Author by

Mohsen Emami

It’s 10 years that I've been working in software development industry with the concentration on developing Native and Cross-Platform applications using Android (Java/Kotlin) and also Flutter framework (Dart). I'm an ever-learning process-focused mobile engineer that always enjoyed working with new technologies and being challenged with obstacles to overcome. I've master's degree in Computer Engineering from University of Tehran and have always tried to apply my academic knowledge in my professional work.

Updated on June 18, 2022

Comments

  • Mohsen Emami
    Mohsen Emami over 1 year

    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?

  • Mohsen Emami
    Mohsen Emami almost 4 years
    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.
  • guenis
    guenis over 2 years
    had to add "deviceId": "chrome" in configurations to get it to work.