How to Debug Your FlutterFlow App's Code

Run Mode is the most powerful debugging tool available in FlutterFlow. Click the 'Run' button in the top-right toolbar (the play icon, or the button that shows your connected device name). FlutterFlow compiles your full project and runs it either on a connected physical device, an emulator, or FlutterFlow's hosted preview environment. Once the app is running, a 'DevTools' button appears in the FlutterFlow toolbar. Click it to open Flutter DevTools in a browser tab. Navigate to the 'Logging' tab in DevTools — this is your console. All debugPrint() calls, Flutter framework warnings, and uncaught exceptions appear here in real time as you interact with the app. You can filter by log level and search for specific strings.

When a Custom Action produces unexpected results, add debugPrint() calls at key points in the function to trace execution. Open the Custom Code panel (</> in the left sidebar), find your Custom Action, and add debugPrint statements that output variable values and execution checkpoints. For example, add 'debugPrint("fetchUserData: starting for uid=$uid");' at the beginning and 'debugPrint("fetchUserData: result = $result");' before the return statement. Tap Compile, then run the app in Run Mode and trigger the action. Check the DevTools Logging tab for your output. Unlike print(), debugPrint() is rate-limited (prevents log flooding with fast loops) and is automatically stripped in release builds.

1Future<String> fetchUserProfile(String uid) async {
2  debugPrint('fetchUserProfile: called with uid=$uid');
3
4  if (uid.isEmpty) {
5    debugPrint('fetchUserProfile: ERROR — uid is empty, returning early.');
6    return '';
7  }
8
9  try {
10    final doc = await FirebaseFirestore.instance
11        .collection('users')
12        .doc(uid)
13        .get();
14
15    debugPrint('fetchUserProfile: doc exists = ${doc.exists}');
16    final displayName = doc.data()?['displayName'] as String? ?? '';
17    debugPrint('fetchUserProfile: displayName = $displayName');
18    return displayName;
19  } catch (e) {
20    debugPrint('fetchUserProfile: EXCEPTION $e');
21    return '';
22  }
23}

For data binding bugs — where a widget shows the wrong value — Custom Functions are a powerful inspection tool. Create a temporary Custom Function named 'debugInspect' that takes a dynamic value and returns it as a formatted String. In the widget whose data looks wrong, add a Text widget next to it and bind its value to 'Set from Variable → Custom Functions → debugInspect', passing in the same data source your problematic widget uses. This lets you see the raw value being passed to the widget at render time without needing the DevTools console. Once you have identified the issue, delete the debug Text widget. This technique is especially useful for diagnosing null values, type mismatches, and Firestore field name typos.

1// Temporary debug Custom Function — delete after debugging
2// Return type: String
3// Parameter: value (dynamic)
4String debugInspect(dynamic value) {
5  if (value == null) return 'NULL';
6  return '${value.runtimeType}: $value';
7}

Test Mode runs your app in the FlutterFlow browser with real Firebase/Supabase data, without needing a connected device. Click the 'Test' button (different from 'Run') in the FlutterFlow toolbar. The app opens in a browser tab and you can interact with it as a real user would. Test Mode is ideal for debugging Action Flow logic: trigger the action, watch what happens, and check Firestore directly in the Firebase Console to see if documents were created, updated, or queried as expected. For actions that should write data, open Firestore in a side-by-side browser tab and refresh after triggering the action. For actions that should read data, check the widget output against the Firestore document values.

Many FlutterFlow bugs are caused by Action Flow conditionals that evaluate incorrectly due to null values or type mismatches. In the Action Flow editor, review each conditional's expression carefully. If a condition checks 'currentUser.biometricEnabled is true', verify that the Firestore field is actually a boolean type and not a string 'true'. FlutterFlow's condition editor shows the data type of each operand — look for orange or red type indicators that signal a type mismatch. For conditionals that unexpectedly take the FALSE branch, add a Snackbar action in the FALSE branch that shows the evaluated value using a binding, so you can see what value the condition actually received at runtime.