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.