Debug your native code during Flutter runtime
Learn to attach a native Android & iOS debugger even when your Flutter app is still running!
In this article, I’m going to show you how to seamlessly add your Android or iOS debugger while you’re still running and debugging your Flutter app. This requires no rebuilding for your app, even if you’re already debugging your Flutter app.
The steps in the article require:
- Android Studio for Android, and XCode for iOS, as the native debuggers are coming from their respective IDEs.
- The app is Debuggable, which means you’re using Debug mode. The steps won’t work if you have your app running in Release mode.
I had a bug in my Flutter app which started appearing when I updated a dependency to a higher version, so I started adding breakpoints to my dart code and started debugging like so:
canLuanchUrl is a function from a plugin called url_launcher I mentioned earlier, and after debugging deeply into its code, I reached a point where the plugin is calling a native method using method channels.
At this point, I knew I couldn’t debug any further in the dart code, so here’s where I started debugging the native side, my bug was showing on the Android platform only.
Follow these steps:
1- Open your ‘android’ or ‘ios’ directory in a new project in Android Studio or XCode
For this step, all you have to do is to reach for your ‘android’ or ‘ios’ directories in the file tree in Android Studio, right-click — Flutter — Open Android/iOS module in Android Studio/XCode. Android Studio and XCode will start recognizing their native portion of your Flutter app.
If the option “Flutter” is greyed out for you, or you’re using vs code, you can manually open up the directory with Android Studio or XCode as any other project.
2- Add a breakpoint to your native code
In my case, I looked up the canLaunch function in the plugin’s Android implementation code, and added a breakpoint to it.
You can add a breakpoint to your desired location in XCode too.
3- Attach a native debugger in your IDE and choose your app’s process
Remember your Flutter app is still running, so meanwhile:
- On Android Studio: on the top-right-hand side, click on the icon ‘Attach Debugger to Android Processes’:
And choose your apps’ process:
- On XCode: click ‘Debug’ in the menu — Attach to process — and your app’s process would appear in the Likely Targets section with the name Runner:
Now your native debugger will stop on the breakpoints that you’ve set once your app executes through your native code.
In my case, once I resume my Flutter debugger execution which was on the method channel call, the corresponding native debugger will stop on the breakpoint we’ve set in the native code, and I may now continue debugging my native code. 🎉
My bug was that the componentName is being null, I looked it up and found out that this is due to a recent change in a newer Android API level 30+ that the plugin has implemented, and it requires me to declare a query tag in the AndroidManifest.xml file to be able to obtain the componentName.
That’s it! Found this article helpful? Consider a clap 👏🏻.
Good Luck Fluttering 👨🏻💻
