Debug Web View Flutter App

To inspect/debug a web page loaded inside a Flutter in app browser (e.g. WebView) on an Android device using Chrome on desktop, you can use Chrome DevTools remote debugging. Here’s the clean way to set it up:

---

✅ 1. Enable WebView debugging in your Flutter app

In your Android code (usually in MainActivity), enable debugging:

import android.webkit.WebView;

@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  WebView.setWebContentsDebuggingEnabled(true);
}

Or if using Flutter plugins like webview_flutter, this is often already enabled in debug builds.

---

✅ 2. Enable Developer Options + USB Debugging on Android

On your phone:

• Go to Settings → About phone
• Tap Build number 7 times
• Go back → Developer options
• Enable USB debugging

---

✅ 3. Connect device to your computer

• Plug in via USB
• Accept the “Allow USB debugging” prompt on your phone

---

✅ 4. Open Chrome DevTools on desktop

On your desktop Chrome:

Go to:

chrome://inspect/#devices

You should see:

• Your Android device
• A list of WebViews (your Flutter app pages)

---

✅ 5. Inspect the WebView

• Find your app’s WebView (it may show the page URL or about:blank)
• Click “Inspect”

➡️ This opens full Chrome DevTools, where you can:

• Inspect DOM
• Debug JavaScript
• View console logs
• Monitor network requests
• Use Elements, Sources, Network tabs, etc.

---

⚠️ Common issues & fixes

🔹 WebView not showing?

• Make sure:
  • App is running in debug mode
  • WebView.setWebContentsDebuggingEnabled(true) is set
  • Page is actually loaded

---

🔹 Multiple WebViews?

• Identify by URL or timing
• You can log the URL in Flutter to match it

---

 Using flutter_inappwebview plugin?

Make sure:

InAppWebView(
  initialOptions: InAppWebViewGroupOptions(
    android: AndroidInAppWebViewOptions(
      debuggingEnabled: true,
    ),
  ),
)

---

🔹 HTTPS / mixed content issues

Use DevTools Console + Network tab to spot:

• CORS errors
• Blocked requests
• SSL problems

---

💡 Pro tip

You can also debug console logs directly in Flutter:

onConsoleMessage: (controller, consoleMessage) {
  print(consoleMessage.message);
}

---

🧠 Summary

The key tool here is:
👉 chrome://inspect in Chrome

It treats your in-app WebView like a normal browser tab, giving you full debugging power.

---

If you want, I can show:

• how to debug cookies / localStorage
• or how to intercept requests (advanced debugging)