How to debug or print in Flutter web?

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.

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.

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.