| íëĒŠ | ë´ėŠ |
|---|
| Invoke | /inspector |
| Aliases | /debug, /inspect, /flutter:debug |
| Category | petmedi-development |
| Complexity | moderate |
| MCP Servers | flutter-inspector, serena |
/inspector#
Context Framework Note: Activated when debugging Flutter apps at runtime.
Triggers#
- When app debugging is requested
- When runtime state inspection is needed
- When MCP toolkit-based inspection is needed
Context Trigger Pattern#
/inspector {area} [--options]
Parameters#
| Parameter | Required | Description | Example |
|---|
area |
No |
Inspection area |
nav
,
bloc
,
auth
,
network
,
log
,
ui
,
config
,
form
,
image
|
--verbose | No | Verbose output | |
--all | No | Inspect all areas | |
Sub-Inspectors#
9 Specialized Inspectors#
| Inspector | Role | Key Tools |
|---|
/inspector/nav |
GoRouter navigation |
nav_get_current_route, nav_get_history |
/inspector/bloc |
BLoC state tracking |
bloc_list_active, bloc_get_state |
/inspector/auth |
Authentication status |
auth_get_status, auth_get_user |
/inspector/network |
HTTP request logging |
network_get_logs, network_get_errors |
/inspector/log |
App log management |
log_get_recent, log_get_errors |
/inspector/ui |
Widget tree inspection |
ui_get_widget_tree, ui_find_overflow |
/inspector/config |
Settings/feature flags |
config_get_all, config_get_feature_flags |
/inspector/form |
Form validation debugging |
form_get_state, form_get_errors |
/inspector/image |
Image cache/memory |
img_get_cache_stats, img_analyze_warnings |
Prerequisites#
Flutter App Run Conditions#
# Run in debug mode (VM Service enabled)
flutter run --debug \
--enable-vm-service \
--host-vmservice-port=8182 \
--dds-port=8181 \
--disable-service-auth-codes
// main.dart
import 'package:mcp_toolkit/mcp_toolkit.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
MCPToolkitBinding.instance
..initialize()
..initializeFlutterToolkit();
if (kDebugMode) {
// Register custom tools
registerDebugTools();
}
runApp(const MyApp());
}
Diagnostic Workflow#
+---------------------------------------------+
| 1. Verify App Connection |
+---------------------------------------------+
| - Test hot_reload_flutter |
| - Check listClientToolsAndResources |
+---------------------------------------------+
|
v
+---------------------------------------------+
| 2. Identify Problem Area |
+---------------------------------------------+
| - Screen transition - > @flutter-inspector-nav|
| - State issue - > @flutter-inspector-bloc |
| - Login issue - > @flutter-inspector-auth |
| - API issue - > @flutter-inspector-network |
+---------------------------------------------+
|
v
+---------------------------------------------+
| 3. Detailed Analysis |
+---------------------------------------------+
| - Run specialized inspector tools |
| - Track logs and state |
| - Identify issues |
+---------------------------------------------+
|
v
+---------------------------------------------+
| 4. Resolution and Verification |
+---------------------------------------------+
| - Suggest code fixes |
| - Apply with hot_reload_flutter |
| - Confirm with re-inspection |
+---------------------------------------------+
Quick Diagnostics#
Screen Transition Issues#
1. /inspector/nav - > Check current route
2. nav_get_history - > Track transition history
3. nav_get_params - > Verify passed parameters
State Management Issues#
1. /inspector/bloc - > Active BLoC list
2. bloc_get_state - > Check current state
3. bloc_get_events - > Event history
API Errors#
1. /inspector/network - > Request/response logs
2. network_get_errors - > Check failed requests
3. /inspector/auth - > Check token status
UI Layout Issues#
1. /inspector/ui - > Check widget tree
2. ui_find_overflow - > Search for overflow
3. ui_get_screen_info - > Screen info
1. /inspector/image - > Image cache analysis
2. img_analyze_warnings - > Memory warnings
3. /inspector/log - > Performance related logs
MCP Integration#
| Step | MCP Server | Purpose |
|---|
| App connection | flutter-inspector | VM Service connection |
| Tool query | flutter-inspector | listClientToolsAndResources |
| Tool execution | flutter-inspector | runClientTool |
| Code analysis | serena | Related code search |
Examples#
Full state check#
Navigation debugging#
BLoC state check#
/inspector bloc --verbose
Network error analysis#
References#
- Detailed implementation:
.claude/agents/flutter-inspector.md
- Sub-inspectors:
.claude/commands/inspector/
- MCP toolkit:
package/mcp_toolkit/
