DevTools Extension

The glade_forms package includes a Flutter DevTools extension that helps you inspect and debug your form models during development.

Features

The glade_forms DevTools extension provides:

• View Active Models: See all active GladeModel instances in your application
• Inspect Inputs: View the current values and validation states of all form inputs
• Monitor State: Track whether forms are dirty, pure, valid, or invalid in real-time
• Real-time Updates: Watch as forms change while you interact with your application

Installation

The DevTools extension is automatically available when you add glade_forms to your project. No additional setup is required.

How to Access DevTools

Option 1: Using VS Code

1. Run your Flutter application in debug mode (press F5 or click "Run and Debug")
2. Once the app is running, open the Command Palette (Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows/Linux)
3. Type "Dart: Open DevTools" and select it
4. DevTools will open in your browser
5. Look for the "Glade Forms" tab in the DevTools interface

Option 2: Using Android Studio / IntelliJ IDEA

1. Run your Flutter application in debug mode
2. Click the "Flutter DevTools" button in the toolbar (or go to Run → Open DevTools)
3. DevTools will open in your browser
4. Navigate to the "Glade Forms" tab

Option 3: Using Command Line

1. Run your Flutter application in debug mode:

   flutter run
   

2. Once running, the console will display a message with a DevTools URL
3. Open that URL in your browser
4. Navigate to the "Glade Forms" tab

Option 4: Direct Launch

You can also launch DevTools independently and connect to your running app:

dart devtools

Then navigate to the provided URL and connect to your running Flutter application.

Using the Extension

Once you have DevTools open:

1. Start your app in debug mode - The extension only works with apps running in debug mode
2. Navigate to the "Glade Forms" tab - You should see it in the top navigation bar
3. Interact with your app - As you fill out forms, the extension updates in real-time
4. Inspect form state - Click on models and inputs to see detailed information

What You Can See

Form Models

View all GladeModel instances that are currently active in your application, including:

• Model type and instance ID
• Overall validation state (valid/invalid)
• Dirty/pure state
• List of all inputs in the model

Input Fields

For each model, inspect individual inputs:

• Input key - The unique identifier for the input
• Input type - Whether it's a string, int, date, etc.
• Current value - The actual value stored in the input
• Initial value - The value the input started with
• Validation state - Whether the input is valid or has errors
• Error messages - Any validation errors currently active
• isPure - Whether the input has been modified from its initial value
• isUnchanged - Whether the current value matches the initial value

Validation Results

See detailed validation information:

• Active validation errors with translated messages
• Warning messages
• Conversion errors (when input cannot be converted to expected type)
• Which validator rules failed (e.g., "isEmail", "minLength", etc.)

Debugging Workflow Example

Here's a typical workflow for debugging a form issue:

1. Run your app and navigate to a form that's having issues
2. Open DevTools and go to the Glade Forms tab
3. Fill out the form in your app
4. Watch the extension update in real-time as you type
5. Identify the problem:
   • Is a field showing as invalid when it should be valid?
   • Is the form dirty state incorrect?
   • Are validation messages not appearing?
6. Inspect the specific input causing issues to see:
   • Exact validation errors
   • Current vs. initial values
   • Which validation rules are failing
7. Make changes to your validation logic and hot reload
8. Verify the fix immediately in DevTools

Benefits for Development

The DevTools extension makes it easier to:

• Debug form validation issues - See exactly why a field is invalid
• Understand form state at any point in time without adding print statements
• Test validation rules without writing temporary debug code
• Identify which inputs are causing validation failures in complex forms
• Verify dirty/pure state tracking is working correctly
• Monitor form behavior in real-time as users interact with your app

Troubleshooting

Extension doesn't appear in DevTools

• Ensure you're running a Flutter app that uses glade_forms
• Make sure the app is in debug mode (not release or profile)
• Try restarting DevTools
• Verify glade_forms is in your pubspec.yaml dependencies

Extension shows "No data available"

• Make sure you have active GladeModel instances in your app
• Navigate to a screen that uses GladeFormBuilder or creates GladeModel instances
• If models are created but not visible, they may have been garbage collected

Data not updating in real-time

• Ensure you're interacting with the form in your app
• Verify the app is still running and connected to DevTools
• Try refreshing the DevTools extension tab

Learn More

• Flutter DevTools Documentation
• DevTools Extensions
• Glade Forms Documentation