Skip to main content
Patrol’s DevTools extension enhances your debugging experience by providing a native UI inspector for Android and iOS apps. This powerful tool allows you to explore the native view hierarchy alongside your Flutter widgets.

​
Overview

The Patrol DevTools extension integrates directly into Flutter DevTools, providing a dedicated panel for inspecting native UI elements. This is particularly useful when working with platform views, native integrations, or debugging complex UI hierarchies.
The Patrol DevTools extension is available only in the web version of DevTools.

​
Features

​
Native UI Inspection

The extension provides a comprehensive view of your app’s native UI hierarchy:
  • Android: Inspect the complete Android view tree, including all native Views and ViewGroups
  • iOS: Explore the iOS view hierarchy with UIViews and UIViewControllers
  • Interactive Tree: Navigate through the native view hierarchy with an intuitive tree interface
  • Property Inspection: View detailed properties and attributes of selected native elements

​
Split-Pane Interface

The extension features a dual-pane layout for efficient debugging:
1

Hierarchy View

The left pane displays the complete native view tree, allowing you to navigate through all native elements in your app.
2

Details Panel

The right pane shows detailed information about the currently selected native element, including its properties, bounds, and other attributes.
3

Refresh Button

Update the native view tree in real-time to reflect the current state of your app.

​
Installation

The Patrol DevTools extension is automatically included when you add Patrol to your project. No additional setup is required.
1

Add Patrol to your project

If you haven’t already, add patrol to your pubspec.yaml:
dev_dependencies:
  patrol: ^latest_version
2

Run your app in debug mode

Start your app on a connected device or emulator:
patrol develop
3

Open DevTools

When prompted, open DevTools in your browser. You can also open it manually from VS Code or the command line.
4

Access the Patrol extension

Look for the Patrol tab in the DevTools interface to access the native UI inspector.

​
Using the Native Inspector

​
Accessing the Inspector

When debugging with the VS Code extension:
  1. Start debugging a Patrol test
  2. Click the Widget Inspector button in the debug toolbar
  3. From the DevTools dropdown, select Open DevTools in browser
  4. Navigate to the Patrol tab
When running tests with patrol develop:
  1. A DevTools URL will be printed to the console
  2. Open the URL in your browser
  3. Navigate to the Patrol tab

​
Inspecting Elements

Once the native inspector is open:
  1. Click the refresh button to load the current native view hierarchy
  2. Expand nodes in the tree view to explore nested elements
  3. Click on any element to view its detailed properties in the details panel
  4. Toggle between full and short node names for better readability
Use the refresh button frequently to ensure you’re viewing the most up-to-date state of your app’s native UI.

​
Platform-Specific Details

​
Android

On Android, the inspector shows:
  • View class names (e.g., TextView, LinearLayout, FrameLayout)
  • View IDs and resource names
  • Layout parameters and dimensions
  • Visibility states
  • Background colors and other styling attributes

​
iOS

On iOS, the inspector displays:
  • View class names (e.g., UIView, UILabel, UIButton)
  • Frame and bounds information
  • AutoLayout constraints
  • Accessibility properties
  • View hierarchy relationships

​
Use Cases

Debug Platform Views

Inspect native platform views embedded in your Flutter app to verify they’re rendering correctly.

Verify Native Integrations

Check that native UI elements are properly integrated with your Flutter code.

Understand View Hierarchy

Explore how Flutter’s rendering engine maps to native views on each platform.

Identify UI Issues

Track down layout problems and rendering issues in the native layer.

​
Troubleshooting

Make sure you’re using the web version of DevTools. The Patrol extension is not available in the embedded VS Code version. Select Open DevTools in browser from the DevTools options.
Click the refresh button to load the native UI hierarchy. If it’s still empty, ensure your app is running in debug mode on a connected device or emulator.
This can happen if the Patrol service extension is not properly initialized. Restart your app and try again.

​
Local Development

If you’re contributing to the Patrol DevTools extension: 
cd packages/patrol_devtools_extension
./publish_to_patrol_extension
This script builds the extension and copies it to the main Patrol package for local development.
The DevTools extension is maintained as part of the Patrol project. For issues or feature requests, visit the Patrol GitHub repository.

Build docs developers (and LLMs) love

Get started for freeTalk to us