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.

• Hit the Debug button and wait 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 breakpoint.
• Inspect the Dart code in Chrome

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 Guide, Flutter Projects, Code 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.