How to Debug or Print In Flutter Web?

· 4 min read
How to Debug or Print In Flutter Web
How to Debug or Print In Flutter Web

You can set breakpoints directly in your IDE/editor such as Android Studio/IntelliJ and VS Code, in the DevTools Debugger, or programmatically. So in this article, we will go through how to Debug or Print In Flutter Web.

How to Debug or Print In Flutter Web??

we can finally find that the Google Chrome DevTools feature has a “Console” section that shows all prints written in Flutter Web‘s dart code when running the project in Web-Server mode.

This is while in Web-Server mode, non of the prints are shown in the Android Studio console.

  • Debugging on Android Studio for web works for Flutter beta v1.17.0 and newer
  • For older versions use: Try a command line like the below:
    flutter clean
  • Upgrade: dart, flutter plugins in android studio
    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.
flutter channel
flutter channel
  • Hit the Debug button and wait for the new window to be opened.
  • Put the breakpoint in AS, not in Chrome.
android studio developer
android studio developer
  • Open Chrome’s Developer tools.
  • Hit the plus button or whatever to hit your breakpoint.
  • Inspect the Dart code in Chrome
debugger in flutter web app
debugger in flutter web app

If you are using VSCode, open launch.json inside the .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.

Conclusion:

In this article, we have walked through how to Debug or Print In Flutter Web??

Keep Learning !!! Keep Fluttering !!!

Do let us know in the comments if you are still confused in flutter!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply