How to debug or print in Flutter web?
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.
- 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.
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, 2022Comments
-
Mohsen Emami over 1 year
I'm using
Flutter 1.10.15
andAndroid 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 inchrome
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 almost 4 yearsWhen 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 over 2 yearshad to add "deviceId": "chrome" in configurations to get it to work.