DevInspector
Inspect any widget in debug with a long press and copy the context straight to an AI.
DevInspector is a debug-only tool: hold down a widget for ~1 second and a panel opens with its name, file, line, and properties. The Copy for AI button formats it all into a message you paste into Claude or Cursor: it already knows what and where to change.
Only shows up in debug. In production, DevInspector.wrap() returns the child directly. Zero impact.
Don't confuse this with Device Preview. DevInspector identifies a widget on screen. If you want to simulate the app inside an iPhone/iPad frame in the browser (to see how it looks on different screen sizes), that's Device Preview, a different tool that only works on the web.
Implementation
-
If it isn't on yet, enable it in Settings → Admin → Tools → Dev Inspector (toggle). Available to any dev in debug, even without the admin role.
-
Run the app in debug (
kasy run). -
Hold down any widget for ~1 second. The panel opens with the widget's info.
-
Tap Copy for AI and paste it into the chat.
Information
What shows up in the panel
[DevInspector: Kit]
Widget: ElevatedButton
File: lib/features/auth/presentation/login_page.dart
Line: 87
Properties:
- text: "Sign in"
- backgroundColor: Color(0xFF6750A4)
Parent context: Column > Padding > ElevatedButtonHow it works under the hood
Uses Flutter DevTools' own WidgetInspectorService to locate the tapped widget. The screenshot is taken automatically.
Structure in the project
lib/core/dev_inspector/
├── dev_inspector.dart ← entry point
├── dev_inspector_overlay.dart ← captures the long press
├── dev_inspector_panel.dart ← bottom sheet with the info
├── dev_inspector_service.dart ← calls WidgetInspectorService
└── dev_inspector_clipboard.dart ← formats and copies for the AILast updated on 08/02/2026