Open In App

Flutter – Using the Debugger

Improve
Improve
Like Article
Like
Save
Share
Report

Flutter is an open-source User Interface SDK that is Software Development Kit. Flutter is an open-source project, and it is maintained by Google. This is used to develop apps for Android apps, iOS apps, and operating systems like Linux software, Mac app and software, Windows app, Google Fuchsia, and the website from a single code base. Currently, in March 2021. Google has been released another new version of flutter that is Flutter 2.  Flutter as a software development kit is great, but while building a big application it is evident that there will be some problems or bugs in the code which has to be debugged. Flutter provides multiple debugging tools such as timeline inspector, memory and performance inspector, and else. These tools ease up the debugging process for a developer, below are listed different tools for debugging flutter apps.

Debugging Flutter apps:

There is a wide range of tools and features to help debug Flutter applications. The following tools and features are available:

  1.  DevTool a suite of performance and profiling tools that are run in a browser.
  2. Android Studio / IntelliJ and VS Code support inbuilt source-level debugger with the ability to set the breakpoints, step through the code and examine the values.
  3. Logging view, a widget inspector working in DevTools, and also indirectly from the Android Studio & IntelliJ. The inspector allows to you for examining a visual representation of the widget trees, inspect individual widgets and their property values, enable the performance overlay, and more.

Console output: Console output for the running app (stdout and stderr) is displayed in the console, below the source code area. You can also see the output in the screenshot.

Improve workflow with a full view of releases, so you can mark errors as resolved and prioritize live issues. In flutter debugging entire code run line by line for the single instance.  Also learn in which version a particular bug first appeared, merge duplicates, and know if things regress in a future release. Add commit data to automatically suggest an owner of each application error.

Using the Debugger:  

It works with all the flutter & Dart applications.

Example

First, we import the flutter package and particular class (material) using the “import ‘package flutter /material dart. Basically, dart is developed by Google for multiple platforms like to build mobile, desktop, server, and web applications. Actually flutter is very rich in the classes so we import a particular class. Here we import material class. “Import dart: developer as dev” here we import the developer tools such as the debugger and inspector. In this example basically, we are using the counter class.

In this image we use the dev.debugger() function

After this call the actually debugging is by the developer can see every iteration of the code for the check every iteration of code run and also show every action the console output. That makes the developer for the actual flow of the code and actually, the action is done in which iteration. 

Easy to figure the useless code line or code in the code part which is not actually useful work is done or not useful for the developer that is the application of debugging the code or application. 

DevTools 

1. Full source-level debugger: A full source-level debugger is a type of debugger which shows that expression in the source code that resulted in a particular machine code loaded in the memory of the system. It is a very good tool for debugging execution programs. It is useful when working with crashed programs that leave dump files. In source-level debugger statements in the source and location of that code in the executable.

2. Supporting breakpoints: Supporting breakpoint is a feature that is very great. The feature provided by debugger When performing a hot restart for a Flutter application, user breakpoints are cleared. For setting up breakpoints in any program click the left margin in the source area. Click once set breakpoints. Which also shows in the breakpoints area on the left.

3. Stepping: Stepping means Use Step in to step into a method invocation, stopping at the first executable line in the invoked method. Use Step over to step over a method invocation: This steps through source lines in the current method in your program. Use Step out to step out of the current method, without stopping at any intermediary lines in the program.

4. Variable inspection: Variable inspection in the Flutter widget inspector is a powerful tool for visualizing and exploring Flutter widget trees. The Flutter SDK uses widgets as the core building block of application form controls such as text, buttons, and toggles, to layouts such as centering, padding, rows, and columns. The variable inspector tool is employed to visualize and explore Flutter widget trees and can be used for the following: understanding existing layouts that are already in it And checking diagnosing layout issues.

When we use the debugger tab, we should see the source for the main entry points of our application loaded in the debugger.

 


Last Updated : 31 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads