Flutter — Easily inspecting HTTP Request/Response Payloads and SharedPreferences

HTTP Request payload

If you are a Flutter developer, chances are you are familiar with DevTools, an excellent suite of performance and debugging tools for Dart and Flutter. It’s under constant development, and the chances are that it’ll become the best tool out there.

But today it has some limitations, like the fact it can only inspect the header of HTTP requests and responses, or we can’t yet inspect/edit internal shared preferences used by our apps.

I want to share with you my favorite Plugin to do this kind of thing: Flutter Stetho lib. The use is relatively easy if compared with other plugins capable of doing the same:

1. Add it in your pubspec.yaml file — I recommend to use the version below instead of the official one (currently with some bugs that prevent us from seeing the request body)

flutter_stetho:
    git:
      url: https://github.com/brianegan/flutter_stetho
      ref: 1787dd145d792e92427c9e2ffbb6dbffede1bcbb

2. After that, you only need to start it in your main.dart file (prefer to initialize it only to your “dev” environment).

Then all you need to do is open Chrome web browser and go to "chrome://inspect" to see a list of your apps. Click upon "inspect"

chrome://inspect

After that, click in the “Network” tab to see a list with all your Requests:

Network tab

You should be able to see all the HTTP Headers, as well the Payload of any call:

HTTP Request payload

If you are using SharedPreferences, you can also inspect/edit all the "key-value" pairs saved

Shared Preferences inspection

Some limitations:

• Currently, the above solution works only in Android, but it’s usually enough to check all your network requests and key-values saved into SharedPreferences.

guilherme-v/flutter-clean-arch

☕️ Twitter

☕️ LinkedIn