How to Use FlutterFlow's Built-In Testing Features

Click the Run button (triangle play icon) in the top-right toolbar. FlutterFlow compiles your app and opens it in a new browser tab. You can click buttons, fill forms, and navigate between pages exactly as a user would. Run Mode uses simulated data — it does not read from or write to your real Firestore database. This makes it safe to test destructive actions. Use Run Mode after building each new feature to confirm the UI flow works before adding backend logic. You can share the Run Mode URL with teammates or clients for quick feedback without publishing.

Click the dropdown arrow next to the Run button and select Test Mode. FlutterFlow compiles and deploys your app to a temporary URL connected to your actual Firebase project. Any data you read or write in Test Mode hits your real Firestore database. This is the right mode for validating queries, checking security rules, and testing auth flows. Because real data is involved, avoid running destructive tests in production collections. Create a separate test collection or use a staging Firebase project when possible. Test Mode is also where you validate that Firestore security rules allow the correct reads and writes.

In the FlutterFlow canvas, locate the Device Preview toolbar along the top of the canvas area. Use the device selector to switch between phone sizes (iPhone SE, iPhone 14, Pixel 7), tablets, and web breakpoints. Watch how your layouts respond as you switch devices. Widgets with hardcoded pixel widths often break on small screens. Columns set to fixed heights clip content on short devices. Use the Column with Expanded children or set Flex values on your layout children to create flexible layouts. Test on at least a small phone (375px wide), a standard phone (390px wide), and a tablet (768px wide) before shipping.

FlutterFlow displays red circular badge icons on widgets in the widget tree and on the canvas when a widget has a configuration error. Common causes include: a required property left empty, a variable reference that no longer exists, an action referencing a deleted page, or a component parameter that has no value bound. Click the red badge to open the error detail panel, which describes the specific misconfiguration. Fix each error before running the app — unresolved errors often cause runtime crashes or silent failures where actions simply don't execute. Use the Issues panel (accessible from the bottom toolbar) to see a complete list of all errors across your project.

When your app is running in Run Mode or Test Mode in Chrome, open DevTools with Cmd+Option+J (Mac) or Ctrl+Shift+J (Windows). FlutterFlow custom actions can use debugPrint() calls to log values to the console. You can also see Flutter framework errors logged here when widgets fail to render. Filter by Errors to isolate crash logs. This is especially useful for diagnosing why a Custom Action isn't firing or why an API call returns unexpected data. For Firebase-specific errors, the Network tab shows the exact request and response from Firestore REST calls.

1// Inside a Custom Action, add debug output:
2debugPrint('Cart total: ${cartTotal.toString()}');
3debugPrint('User ID: ${currentUserUid}');
4debugPrint('API response: ${response.statusCode}');