Inspect Flutter API Calls in Chrome DevTools

Flutter stetho interceptor

Debugging API requests in Flutter apps — especially on Android — can be frustrating. While logging helps, it only goes so far. Flutter’s built-in DevTools do offer a Network tab for inspecting calls, but it requires a local setup of Dart DevTools, which isn’t convenient for testers or non-developers.

So I built flutter_stetho_interceptor — a Flutter plugin that lets you inspect HTTP(S) API requests and responses directly inside Chrome DevTools, just like debugging in a web browser.

It’s simple, powerful, and Android-only.

🔍 What It Does

• Intercepts HTTP and HTTPS requests made via Dart’s HttpClient
• Works with popular packages like http, dioand others under the hood
• Let you view request and response details in real-time
• Integrates with Chrome via chrome://inspect
• No external proxies, no logging mess

🎥 See It in Action

Here’s how it looks when inspecting a Flutter app’s API calls in Chrome DevTools:

⚙️ Installation & Setup

1. Add the dependency:

dependencies:
  flutter_stetho_interceptor: ^<latest_version>

2. Initialize early in your app

In your main.dart:

import 'package:flutter/material.dart';
import 'package:flutter_stetho_interceptor/flutter_stetho_interceptor.dart';

void main() {
  FlutterStethoInterceptor.initialize(); // 👈 Do this before any HTTP calls
  runApp(MyApp());
}

That’s it. You’re ready to inspect your app’s network traffic like a pro.

🌐 Viewing in Chrome DevTools

1. Connect your Android emulator or device (ensure USB debugging is enabled)
2. Open Chrome
3. Visit: chrome://inspect
4. Click Inspect under your Flutter app
5. Open the Network tab to watch all API traffic

You’ll see real-time API requests and responses, including headers and bodies.

🛠 Known Issues & Workaround

Some Chrome versions (post Chromium 88) may render the DevTools window incorrectly when used with Android debugging tools.

✅ Solution:

Use a Chromium-based browser like Brave (v1.20.110), which is based on Chromium 88 and works perfectly.

🔗 Download Brave v1.20.110

🙌 Why I Built This

As a Flutter developer building Android apps, I constantly needed a lightweight way to debug network calls.

Existing solutions were outdated or too complex to set up. So I built a modern, plug-and-play plugin that:

• Uses native Android debugging tools
• Integrates with Chrome seamlessly
• Requires minimal setup in Flutter

📦 Plugin Info

• Plugin: flutter_stetho_interceptor
• GitHub: github.com/rathorerahul586/flutter_stetho_interceptor

💡 Final Thoughts

If you’re building Flutter apps for Android and want a fast, zero-config way to debug network calls, this plugin might save you a ton of time.

🐛 Feedback or suggestions? Open an issue on GitHub!