{"id":32284530,"url":"https://github.com/baccusf/inappwebview_inspector","last_synced_at":"2026-02-21T07:03:08.551Z","repository":{"id":308843120,"uuid":"1034227412","full_name":"baccusf/inappwebview_inspector","owner":"baccusf","description":"Flutter WebView Inspector - Real-time debugging tool for flutter_inappwebview with console monitoring, JavaScript execution, and draggable UI interface","archived":false,"fork":false,"pushed_at":"2025-09-15T13:18:37.000Z","size":1435,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-23T01:32:43.112Z","etag":null,"topics":["android","console","dart","debugging","flutter","inappwebview","inspector","ios","webview"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/baccusf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-08T04:03:42.000Z","updated_at":"2025-09-15T12:28:07.000Z","dependencies_parsed_at":"2025-08-08T08:41:19.705Z","dependency_job_id":"a5da3652-fc13-4b38-9a98-2ef621074d22","html_url":"https://github.com/baccusf/inappwebview_inspector","commit_stats":null,"previous_names":["baccusf/inappwebview_inspector"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/baccusf/inappwebview_inspector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baccusf%2Finappwebview_inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baccusf%2Finappwebview_inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baccusf%2Finappwebview_inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baccusf%2Finappwebview_inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baccusf","download_url":"https://codeload.github.com/baccusf/inappwebview_inspector/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baccusf%2Finappwebview_inspector/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29675924,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T06:23:40.028Z","status":"ssl_error","status_checked_at":"2026-02-21T06:23:39.222Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","console","dart","debugging","flutter","inappwebview","inspector","ios","webview"],"created_at":"2025-10-23T01:32:36.554Z","updated_at":"2026-02-21T07:03:08.545Z","avatar_url":"https://github.com/baccusf.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# InAppWebView Inspector 🔍\n\n[![Pub Version](https://img.shields.io/pub/v/inappwebview_inspector)](https://pub.dev/packages/inappwebview_inspector)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA powerful WebView inspector and debugging tool for `flutter_inappwebview`. Provides real-time console monitoring, JavaScript execution, and script history management with a draggable overlay interface.\n\n\u003e 🤖 **Developed with Claude**: This Flutter library was developed using **Vibe coding** methodology in collaboration with Claude AI, showcasing the power of AI-assisted development and human-AI collaborative programming.\n\n## 🌍 Multi-language Documentation\n\n- **English** | [한국어 (Korean)](README_ko.md) | [日本語 (Japanese)](README_ja.md)\n\n## ✨ Features\n\n### 🚀 **Zero Setup Auto UI Injection** *(New!)*\n- **No Manual Widget Placement**: Inspector UI automatically injects as overlay when `show()` is called\n- **Smart Context Discovery**: Automatic BuildContext discovery via WidgetsBinding and NavigatorKey fallback  \n- **Developer-Controlled**: User controls when auto-injection is enabled via debug mode initialization\n- **Hot Reload Compatible**: Robust overlay system that works seamlessly with Flutter's hot reload\n- **Performance Optimized**: Optional NavigatorKey integration for instant context access\n- **Zero Configuration**: Just call `toggle()` and the UI appears - no Stack widgets or manual placement needed\n\n### 🖥️ **Real-time Console Monitoring**\n- **Live Console Output**: Monitor all JavaScript console messages (`log`, `warn`, `error`, `debug`) in real-time\n- **Color-coded Messages**: Different colors for different log levels for easy identification\n- **Timestamp Display**: Each message includes precise timestamp information\n- **Multi-line Support**: Full support for long messages and multi-line output\n- **Clean Interface**: Removed unnecessary labels for streamlined debugging experience\n\n### 🚀 **Enhanced JavaScript Execution**\n- **Interactive Console**: Execute JavaScript code directly in your WebView with intelligent result handling\n- **Smart DOM Object Processing**: \n  - `document.querySelector(\"h1\")` → Shows element details (tag, id, class, text content)\n  - `document.querySelectorAll(\"p\")` → Lists all matching elements with comprehensive information\n  - `document.body.classList` → Automatically converts to readable array format\n  - Functions and complex objects → Displays in developer-friendly format\n- **Enhanced Error Handling**: Comprehensive error messages with helpful suggestions for common DOM operations\n- **Unicode \u0026 Base64 Support**: Advanced script encoding options for complex scenarios\n\n### 📚 **Intelligent Script History System**\n- **Pre-loaded Scripts**: 15+ commonly used JavaScript snippets ready to use immediately\n- **Frequency-based Sorting**: Most-used scripts automatically appear first\n- **Memory-based Storage**: Fast, lightweight history management without file I/O\n- **Smart Suggestions**: Context-aware script recommendations\n- **Usage Tracking**: Automatically tracks and prioritizes frequently used scripts\n\n### 🎯 **Multi-WebView Management**\n- **Multiple WebView Support**: Handle unlimited WebViews in a single application\n- **Easy Switching**: Quick dropdown to switch between registered WebViews\n- **Individual Monitoring**: Each WebView maintains its own console and execution context\n- **Automatic Registration**: Simple API to register and manage WebView instances\n\n### 🌍 **Comprehensive Internationalization**\n- **8 Languages Supported**: English, Korean, Japanese, Spanish, French, German, Chinese (Simplified), Portuguese\n- **Auto-detection**: Automatic language detection from system locale\n- **Easy Localization**: Simple API to set preferred language\n- **Consistent UI**: All interface elements properly localized\n\n### 🎨 **Advanced User Interface**\n- **Draggable Overlay**: Move the inspector anywhere on screen with smooth drag interactions\n- **Resizable Interface**: Switch between compact and maximized modes for different use cases\n- **SafeArea Aware**: Automatically adjusts to device screen constraints and notches\n- **Stack-based Architecture**: Stable popup system without overlay conflicts\n- **Clean Design**: Minimal, developer-focused interface optimized for productivity\n\n## Installation\n\nAdd this to your package's `pubspec.yaml` file:\n\n```yaml\ndependencies:\n  inappwebview_inspector: ^0.2.1\n  flutter_inappwebview: ^6.1.5\n```\n\nThen run:\n\n```bash\n$ flutter pub get\n```\n\n## 🚀 Quick Start\n\n### 1. Initialize the Inspector\n\nAdd this to your `main()` function:\n\n```dart\nimport 'package:flutter/foundation.dart';\nimport 'package:inappwebview_inspector/inappwebview_inspector.dart';\n\nvoid main() {\n  // Zero setup initialization - show() will auto-inject UI\n  if (kDebugMode) {\n    InAppWebViewInspector.initializeDevelopment(\n      enableScriptHistory: true,\n      maxScriptHistoryCount: 25,\n      localizations: InAppWebViewInspectorLocalizations.english, // Change as needed\n      onScriptExecuted: (script, webViewId) {\n        print('Executed: $script on $webViewId');\n      },\n      onConsoleLog: (log) {\n        print('Console [${log.levelText}]: ${log.message}');\n      },\n    );\n  }\n  \n  runApp(MyApp());\n}\n```\n\n### 2. Add NavigatorKey for Optimal Performance (Recommended)\n\n```dart\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'WebView Inspector Demo',\n      // Add navigatorKey for optimal auto UI injection performance\n      navigatorKey: InAppWebViewInspector.navigatorKey,\n      home: MyWebViewPage(),\n    );\n  }\n}\n```\n\n### 3. Simple WebView Setup - Zero Manual UI Placement\n\n**✨ New: Zero Setup Auto UI Injection** - No need to manually add widgets to your UI!\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:flutter_inappwebview/flutter_inappwebview.dart';\nimport 'package:inappwebview_inspector/inappwebview_inspector.dart';\n\nclass MyWebViewPage extends StatefulWidget {\n  @override\n  _MyWebViewPageState createState() =\u003e _MyWebViewPageState();\n}\n\nclass _MyWebViewPageState extends State\u003cMyWebViewPage\u003e {\n  InAppWebViewController? webViewController;\n  final String webViewId = 'main_webview';\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('WebView with Inspector'),\n        actions: [\n          // Toggle button - UI will auto-inject when pressed!\n          IconButton(\n            icon: Icon(Icons.bug_report),\n            onPressed: InAppWebViewInspector.toggle,\n            tooltip: 'Toggle Inspector\\n(Zero Setup - UI Auto-Injected!)',\n          ),\n        ],\n      ),\n      // ✨ No Stack needed! Inspector UI auto-injects as overlay\n      body: Column(\n        children: [\n          // Your main WebView - Inspector UI auto-injects when show() is called\n          Expanded(\n            child: InAppWebView(\n              initialUrlRequest: URLRequest(\n                url: WebUri('https://flutter.dev'),\n              ),\n              onWebViewCreated: (controller) {\n                webViewController = controller;\n                \n                // Register WebView with inspector\n                InAppWebViewInspector.registerWebView(\n                  webViewId,\n                  controller,\n                  'https://flutter.dev',\n                );\n              },\n              onLoadStop: (controller, url) {\n                // Update URL in inspector when navigation occurs\n                if (url != null) {\n                  InAppWebViewInspector.updateWebViewUrl(\n                    webViewId,\n                    url.toString(),\n                  );\n                }\n              },\n              onConsoleMessage: (controller, consoleMessage) {\n                // Forward console messages to inspector\n                InAppWebViewInspector.addConsoleLog(\n                  webViewId,\n                  consoleMessage,\n                );\n              },\n              initialSettings: InAppWebViewSettings(\n                isInspectable: true, // Enable debugging\n                javaScriptEnabled: true,\n                domStorageEnabled: true,\n              ),\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n\n  @override\n  void dispose() {\n    // Clean up when page is disposed\n    InAppWebViewInspector.unregisterWebView(webViewId);\n    super.dispose();\n  }\n}\n```\n\n### 4. Control Inspector Visibility\n\n```dart\n// Show/hide inspector - UI automatically injects as overlay!\nInAppWebViewInspector.show();    // ✨ Auto-injects UI overlay\nInAppWebViewInspector.hide();    // Removes overlay\nInAppWebViewInspector.toggle();  // ✨ Toggle with auto-injection\n\n// Enable/disable inspector\nInAppWebViewInspector.enable();\nInAppWebViewInspector.disable();\n\n// Check status\nbool isVisible = InAppWebViewInspector.isVisible;\nbool isEnabled = InAppWebViewInspector.isEnabled;\n```\n\n## ⚙️ Configuration Options\n\n### Development Mode (Recommended for Debug Builds)\n\n```dart\n// Zero setup - show() always auto-injects UI\nif (kDebugMode) {\n  InAppWebViewInspector.initializeDevelopment(\n    enableScriptHistory: true,\n    maxScriptHistoryCount: 25,\n    maxConsoleLogCount: 500,\n    localizations: InAppWebViewInspectorLocalizations.english,\n    onScriptExecuted: (script, webViewId) {\n      print('Script executed on $webViewId: $script');\n    },\n    onConsoleLog: (log) {\n      print('Console [${log.levelText}]: ${log.message}');\n    },\n  );\n}\n```\n\n### Production Mode (Minimal Impact)\n\n```dart\n// Only initialize in production if needed\nif (!kReleaseMode) {\n  InAppWebViewInspector.initializeProduction(\n    maxConsoleLogCount: 50,\n    enableAutoResultLogging: false,\n    enableScriptHistory: false,\n    localizations: InAppWebViewInspectorLocalizations.english,\n  );\n}\n```\n\n### Advanced Custom Configuration\n\n```dart\n// Advanced configuration with auto UI injection\nif (kDebugMode) {\n  InAppWebViewInspector.initializeWithConfig(\n    InAppWebViewInspectorConfig(\n      debugMode: true,\n      maxConsoleLogCount: 1000,\n      enableAutoResultLogging: true,\n      enableUnicodeQuoteNormalization: true,\n      enableBase64ScriptEncoding: true,\n      enableScriptHistory: true,\n      maxScriptHistoryCount: 30,\n      localizations: InAppWebViewInspectorLocalizations.korean, // Multi-language support\n      onScriptExecuted: (script, webViewId) {\n        // Custom script execution callback\n        analytics.logEvent('script_executed', {'webview_id': webViewId});\n      },\n      onConsoleLog: (log) {\n        // Custom console logging\n        if (log.level == ConsoleMessageLevel.ERROR) {\n          crashlytics.recordError(log.message, null);\n        }\n      },\n      onError: (error, webViewId) {\n        // Error handling callback\n        print('Inspector error in $webViewId: $error');\n      },\n    ),\n  );\n}\n```\n\n### Language Configuration\n\n```dart\n// Available localizations\nInAppWebViewInspectorLocalizations.english\nInAppWebViewInspectorLocalizations.korean\nInAppWebViewInspectorLocalizations.japanese\nInAppWebViewInspectorLocalizations.spanish\nInAppWebViewInspectorLocalizations.french\nInAppWebViewInspectorLocalizations.german\nInAppWebViewInspectorLocalizations.chineseSimplified\nInAppWebViewInspectorLocalizations.portuguese\n\n// Auto-detect from system locale\nfinal localization = InAppWebViewInspectorLocalizations.getByLanguageCode(\n  Localizations.localeOf(context).languageCode\n);\n```\n\n## 🎯 Advanced Usage Examples\n\n### Multiple WebViews Management\n\n```dart\nclass MultiWebViewExample extends StatefulWidget {\n  @override\n  _MultiWebViewExampleState createState() =\u003e _MultiWebViewExampleState();\n}\n\nclass _MultiWebViewExampleState extends State\u003cMultiWebViewExample\u003e {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Multiple WebViews'),\n        actions: [\n          // Single toggle button for all WebViews - UI auto-injects!\n          IconButton(\n            icon: Icon(Icons.bug_report),\n            onPressed: InAppWebViewInspector.toggle,\n            tooltip: 'Toggle Inspector\\n(Zero Setup Auto UI)',\n          ),\n        ],\n      ),\n      // ✨ No Stack needed! Inspector UI auto-injects as overlay\n      body: Column(\n        children: [\n          // First WebView\n          Expanded(\n            child: InAppWebView(\n              onWebViewCreated: (controller) {\n                InAppWebViewInspector.registerWebView(\n                  'webview_1',\n                  controller,\n                  'https://flutter.dev',\n                );\n              },\n              onConsoleMessage: (controller, consoleMessage) {\n                InAppWebViewInspector.addConsoleLog('webview_1', consoleMessage);\n              },\n              initialSettings: InAppWebViewSettings(\n                isInspectable: true,\n                javaScriptEnabled: true,\n              ),\n            ),\n          ),\n          // Second WebView  \n          Expanded(\n            child: InAppWebView(\n              onWebViewCreated: (controller) {\n                InAppWebViewInspector.registerWebView(\n                  'webview_2', \n                  controller,\n                  'https://dart.dev',\n                );\n              },\n              onConsoleMessage: (controller, consoleMessage) {\n                InAppWebViewInspector.addConsoleLog('webview_2', consoleMessage);\n              },\n              initialSettings: InAppWebViewSettings(\n                isInspectable: true,\n                javaScriptEnabled: true,\n              ),\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n}\n```\n\n### Custom Console Messages\n\n```dart\n// Add custom messages from Flutter\nInAppWebViewInspector.instance.addCustomConsoleLog(\n  InAppWebViewInspectorConsoleMessage(\n    webViewId: 'main',\n    level: ConsoleMessageLevel.WARNING,\n    message: 'Custom warning from Flutter side',\n    source: null, // Clean interface without source labels\n    line: null,\n    timestamp: DateTime.now(),\n  ),\n);\n\n// Add development debug messages\nInAppWebViewInspector.instance.addCustomConsoleLog(\n  InAppWebViewInspectorConsoleMessage(\n    webViewId: 'main',\n    level: ConsoleMessageLevel.LOG,\n    message: 'Flutter lifecycle: App resumed',\n    source: null,\n    line: null,\n    timestamp: DateTime.now(),\n  ),\n);\n```\n\n### Programmatic Script Execution\n\n```dart\n// Execute custom scripts programmatically\nvoid executeCustomScripts() {\n  final inspector = InAppWebViewInspector.instance;\n  \n  // Simple value retrieval\n  inspector.executeScript('document.title');\n  \n  // Complex DOM operations  \n  inspector.executeScript('''\n    const links = document.querySelectorAll('a');\n    Array.from(links).map(link =\u003e ({\n      text: link.textContent?.trim(),\n      href: link.href,\n      className: link.className\n    }));\n  ''');\n  \n  // Error handling example\n  inspector.executeScript('''\n    try {\n      const result = performComplexOperation();\n      console.log('Operation successful:', result);\n      return result;\n    } catch (error) {\n      console.error('Operation failed:', error.message);\n      return { error: error.message, stack: error.stack };\n    }\n  ''');\n}\n```\n\n## 🛠️ Pre-loaded Utility Scripts\n\nThe inspector comes with 15+ ready-to-use JavaScript snippets:\n\n### Page Information\n- `document.title` - Get current page title\n- `window.location.href` - Get current URL\n- `document.readyState` - Check page load state\n- `document.getElementsByTagName(\"*\").length` - Count all elements\n\n### DOM Manipulation  \n- `document.querySelector(\"selector\")` - Find single element with details\n- `document.querySelectorAll(\"selector\")` - Find all matching elements\n- `document.body.innerHTML` - Get page HTML content\n- `document.cookie` - View all cookies\n\n### Browser \u0026 Performance\n- `navigator.userAgent` - Get browser information\n- `window.innerWidth + \"x\" + window.innerHeight` - Get viewport size\n- `performance.now()` - High-precision timing\n- `Object.keys(window)` - List global variables\n\n### Storage Access\n- `localStorage.getItem(\"key\")` - Access local storage\n- `sessionStorage.getItem(\"key\")` - Access session storage\n\n### Development Utilities\n- `console.log(\"Hello World\");` - Basic console logging\n\n## 📸 Screenshots\n\n### iOS Inspector Interface\n\u003cimg src=\"screenshots/ios_inspector_demo.png\" width=\"300\" alt=\"iOS WebView Inspector Demo\"\u003e\n\n*The inspector running on iOS showing the draggable overlay interface*\n\n### Android Inspector Interface  \n\u003cimg src=\"screenshots/android_inspector_demo.png\" width=\"300\" alt=\"Android WebView Inspector Demo\"\u003e\n\n*The inspector running on Android with the same powerful debugging features*\n\n### Key Interface Features Shown:\n- **🖱️ Draggable Overlay**: Move the inspector anywhere on screen\n- **📱 Responsive Design**: Adapts to different screen sizes and orientations  \n- **🎯 WebView Selector**: Dropdown to switch between multiple WebViews\n- **⌨️ Interactive Console**: JavaScript input field with history dropdown\n- **📋 Real-time Logs**: Color-coded console output with timestamps\n- **🔄 Resizable Interface**: Toggle between compact and maximized modes\n\n## 🔄 Migration Guide: v0.1.x → v0.2.0\n\n### ✨ What's New in v0.2.0\n\n**Major Feature: Zero Setup Auto UI Injection**\n- No more manual widget placement required\n- Automatic context discovery and overlay injection\n- Simplified integration with just `toggle()` calls\n\n### 🚨 Breaking Changes\n\n#### 1. **Widget Placement No Longer Required** *(Simplified - Not Breaking)*\n**Before (v0.1.x)**: Manual Stack placement required\n```dart\n// ❌ Old way - Still works but not needed\nScaffold(\n  body: Stack(\n    children: [\n      YourContent(),\n      const InAppWebViewInspectorWidget(), // Manual placement\n    ],\n  ),\n)\n```\n\n**After (v0.2.0)**: Zero setup auto-injection *(Recommended)*\n```dart\n// ✅ New way - UI auto-injects as overlay\nScaffold(\n  body: YourContent(), // No Stack needed!\n)\n\n// Just call toggle - UI appears automatically\nInAppWebViewInspector.toggle();\n```\n\n#### 2. **NavigatorKey Integration** *(New Recommendation)*\nFor optimal performance, add NavigatorKey to your MaterialApp:\n\n```dart\n// ✅ Recommended for v0.2.0\nMaterialApp(\n  navigatorKey: InAppWebViewInspector.navigatorKey, // New\n  home: YourHomePage(),\n)\n```\n\n### 📋 Migration Steps\n\n#### Step 1: Update Dependencies\n```yaml\ndependencies:\n  inappwebview_inspector: ^0.2.1  # Updated\n  flutter_inappwebview: ^6.1.5\n```\n\n#### Step 2: Add NavigatorKey (Recommended)\n```dart\nMaterialApp(\n  navigatorKey: InAppWebViewInspector.navigatorKey, // Add this line\n  home: YourHomePage(),\n)\n```\n\n#### Step 3: Simplify UI (Optional)\nYou can now remove manual Stack placement:\n```dart\n// Before: Required Stack\nScaffold(\n  body: Stack(\n    children: [\n      YourContent(),\n      const InAppWebViewInspectorWidget(),\n    ],\n  ),\n)\n\n// After: Simple layout - Inspector auto-injects\nScaffold(\n  body: YourContent(),\n)\n```\n\n#### Step 4: Test Auto-Injection\n```dart\n// Inspector UI will auto-inject when you call:\nInAppWebViewInspector.show();\nInAppWebViewInspector.toggle();\n```\n\n### ⚡ Performance Improvements\n\n- **Faster Context Discovery**: NavigatorKey provides instant context access\n- **Reduced Widget Tree**: No manual Stack widgets needed\n- **Hot Reload Friendly**: Robust overlay system works seamlessly with Flutter's hot reload\n\n### 🔧 Troubleshooting Migration Issues\n\n1. **Inspector not appearing**: Add `navigatorKey: InAppWebViewInspector.navigatorKey` to MaterialApp\n2. **\"No Overlay widget found\"**: Ensure you're calling `toggle()` after initialization\n3. **Layout issues**: Remove manual Stack placement - auto-injection handles positioning\n\n### 🆕 New Features in v0.2.0\n\n- **Automatic UI Injection**: Zero setup overlay system\n- **Smart Context Discovery**: Automatic BuildContext discovery\n- **NavigatorKey Integration**: Optional performance optimization\n- **Enhanced Error Recovery**: Better fallback mechanisms\n- **Hot Reload Compatibility**: Improved development experience\n\n## ⚠️ Important Implementation Notes\n\n### ✨ Zero Setup Auto UI Injection\n\n**New Simplified Approach**: No manual widget placement required!\n\n✅ **New Zero Setup Method**: Auto UI injection (Recommended)\n```dart\n// 1. Add NavigatorKey for optimal performance\nMaterialApp(\n  navigatorKey: InAppWebViewInspector.navigatorKey, // ✅ Optimal setup\n  home: MyWebViewPage(),\n)\n\n// 2. Simple UI with no Stack needed\nScaffold(\n  body: Column(  // ✅ Simple layout\n    children: [\n      Expanded(\n        child: InAppWebView(\n          // Register WebView and inspector auto-injects UI\n          onWebViewCreated: (controller) {\n            InAppWebViewInspector.registerWebView('main', controller, url);\n          },\n        ),\n      ),\n    ],\n  ),\n)\n\n// 3. Toggle inspector - UI auto-appears as overlay!\nInAppWebViewInspector.toggle(); // ✅ Zero manual UI work\n```\n\n### Legacy Manual Widget Placement (Still Supported)\n\nFor advanced use cases, you can still manually place the widget:\n\n```dart\nScaffold(\n  body: Stack(\n    children: [\n      YourMainContent(),\n      const InAppWebViewInspectorWidget(), // Manual placement\n    ],\n  ),\n)\n```\n\n### Common Issues \u0026 Solutions\n\n1. **Inspector not appearing**: Ensure NavigatorKey is added to MaterialApp for optimal context discovery\n2. **Auto UI injection fails**: Check that you're in debug mode and inspector is properly initialized\n3. **\"No Overlay widget found\"**: Add `navigatorKey: InAppWebViewInspector.navigatorKey` to your MaterialApp\n4. **Dependency conflict with git-sourced flutter_inappwebview**: Add dependency override\n\nIf your app uses flutter_inappwebview from git source:\n```yaml\ndependencies:\n  inappwebview_inspector: ^0.2.1\n  flutter_inappwebview:\n    git:\n      url: https://github.com/pichillilorenzo/flutter_inappwebview.git\n      ref: master\n      path: flutter_inappwebview\n\ndependency_overrides:\n  flutter_inappwebview:\n    git:\n      url: https://github.com/pichillilorenzo/flutter_inappwebview.git\n      ref: master\n      path: flutter_inappwebview\n```\n\n### Development vs Production\n\n**Development Build with Auto UI Injection:**\n```dart\nif (kDebugMode) {\n  InAppWebViewInspector.initializeDevelopment(\n    enableScriptHistory: true,\n    maxConsoleLogCount: 500,\n  );\n}\n```\n\n**Production Build (Optional):**\n```dart\nif (!kReleaseMode) {\n  InAppWebViewInspector.initializeProduction(\n    maxConsoleLogCount: 50,\n    enableScriptHistory: false,\n  );\n}\n```\n\n## 📱 Example App\n\nThe [example app](example/) demonstrates:\n\n- ✅ Complete WebView integration with inspector\n- ✅ Multi-language support demonstration  \n- ✅ Pre-loaded script usage\n- ✅ Enhanced DOM object handling\n- ✅ Multiple WebView management\n- ✅ Custom script execution examples\n\nRun the example:\n\n```bash\ncd example \u0026\u0026 flutter run\n```\n\n## 📋 Requirements\n\n- **Flutter**: \u003e= 3.24.0\n- **Dart**: \u003e= 3.5.0  \n- **flutter_inappwebview**: \u003e= 6.1.5\n\n## 🌐 Platform Support\n\n| Platform | Status | Notes |\n|----------|---------|--------|\n| Android | ✅ Full Support | All features available |\n| iOS | ✅ Full Support | All features available |\n\n## 🤝 Contributing\n\nThis project demonstrates the power of **AI-assisted development** using Claude and **Vibe coding** methodology. Contributions are welcome!\n\n### How to Contribute\n\n1. **Fork** the repository\n2. **Create** your feature branch (`git checkout -b feature/amazing-feature`)\n3. **Test** your changes thoroughly \n4. **Commit** your changes (`git commit -m 'Add amazing feature'`)\n5. **Push** to the branch (`git push origin feature/amazing-feature`)\n6. **Open** a Pull Request\n\n### Development Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/baccusf/inappwebview_inspector.git\ncd inappwebview_inspector\n\n# Install dependencies  \nflutter pub get\n\n# Run tests\nflutter test\n\n# Run example\ncd example \u0026\u0026 flutter run\n```\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- **🤖 Claude AI**: This library was developed through AI-human collaborative programming using Claude\n- **⚡ Vibe Coding**: Demonstrated the effectiveness of AI-assisted development methodology  \n- **💙 Flutter Community**: For providing the amazing Flutter framework\n- **🌐 flutter_inappwebview**: For the excellent WebView foundation\n\n## 📞 Support \u0026 Community\n\n- **🐛 Issues**: [Report bugs and issues](https://github.com/baccusf/inappwebview_inspector/issues)\n- **💡 Features**: [Request new features](https://github.com/baccusf/inappwebview_inspector/issues/new?template=feature_request.md)  \n- **📖 Documentation**: Check the comprehensive [CLAUDE.md](CLAUDE.md) for development guidance\n- **💬 Discussions**: [Join community discussions](https://github.com/baccusf/inappwebview_inspector/discussions)\n\n## 🔗 Related Links\n\n- **📦 pub.dev**: [Package on pub.dev](https://pub.dev/packages/inappwebview_inspector)\n- **🌐 Repository**: [GitHub Repository](https://github.com/baccusf/inappwebview_inspector)\n- **📚 flutter_inappwebview**: [Core WebView package](https://pub.dev/packages/flutter_inappwebview)\n- **🤖 Claude**: [Learn more about Claude AI](https://claude.ai)\n\n---\n\n**Happy debugging with AI-assisted development!** 🐛✨🤖","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaccusf%2Finappwebview_inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaccusf%2Finappwebview_inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaccusf%2Finappwebview_inspector/lists"}