Inspecting HTTP requests in FlutterJakub HomlalaBlockedUnblockFollowFollowingMar 12Photo by Anders Wideskott on UnsplashMobile application development comes often with HTTP requests.
We must handle connection with external resources by doing HTTP calls and waiting for responses.
When our application is getting bigger, we are using more and more requests.
There is always chance that HTTP connection may fail, and we’ll want to know what was wrong.
If you’re using Flutter, there are many libraries which can handle HTTP requests: Dio, HttpClient from dart:io package, http package.
You can use whatever you want in your code.
But when we want to inspect these requests, we can only use console logs.
Checking hundreds lines of console logs may be painful since HTTP requests/responses can be very long.
The better approach to check HTTP calls can be some tool which will show HTTP request on demand, with great formatting.
And here comes Alice.
Introducing AliceAlice is a HTTP Inspector for Flutter.
It’s heavily inspired from Chuck tool.
Alice overview.
Alice intercepts HTTP requests and stores them.
Alice also exposes user interface for inspecting call details.
Inspector can be opened from notification (which can be disabled) or manually.
Alice works best with Dio plugin, because Dio is most advanced HTTP client for Dart language.
You can also use Alice with other http clients, which will be described later.
Alice Inspector refreshes when new requests come in, so list of HTTP calls will be refreshed automatically.
InstallationFirst, you need to add dependency to pubspec.
yaml:dependencies: alice: ^<current alice version>You can find current Alice version here: https://pub.
dartlang.
org/packages/aliceSecond, run command:$ flutter packages getThird, add this import:import 'package:alice/alice.
dart';Now you’re ready to use Alice plugin.
Let’s create Alice instance:Alice alice = Alice(showNotification: true);If you don’t want to show notification when new request come in, you can set showNotification parameter to false.
Next thing is navigator key.
You must include it in application to open inspector screen.
What you need to do is just one line addition in MaterialApp widget (MaterialApp is mostly root widget in your application):navigatorKey: alice.
getNavigatorKey()Another example:@overrideWidget build(BuildContext context) { return MaterialApp( navigatorKey: alice.
getNavigatorKey(), .
);}When you’re using Dio, your configuration will be very simple:Dio dio = Dio();dio.
interceptors.
add(alice.
getDioInterceptor());Dio has wonderful feature, which allows to add interceptor.
Alice exposes special interceptor which must be passed to Dio instance.
Alice works best with Dio, but there is support for other http clients (not all features of Dio can be handled with these clients).
When you’re using HttpClient from dart:io package, you need to log every request and response manually:httpClient .
postUrl(Uri.
parse("https://jsonplaceholder.
typicode.
com/posts")) .
then((request) async { alice.
onHttpClientRequest(request, body: body); request.
write(body); var httpResponse = await request.
close(); var responseBody = await httpResponse.
transform(utf8.
decoder).
join(); alice.
onHttpClientResponse(httpResponse, request, body: responseBody);});You need to call alice.
onHttpClientRequest and alice.
onHttpClientResponse to process HTTP calls from HttpClient.
Lastly, when you’re using http package, you need to pass only response:http.
get('https://jsonplaceholder.
typicode.
com/posts').
then((response) { alice.
onHttpResponse(response);});You can pass your response by calling alice.
onHttpResponse.
As you can see usage of http package or HttpClient from dart:io package is little bit tricky, so i recommend using Dio for AliceComplete example for Alice, can be find here: https://github.
com/jhomlala/alice/blob/master/example/lib/main.
dartUsageOnce you’ve completed installation, you can use Alice to inspect logs.
If you’ve enabled notifications, when Alice get first HTTP call, the notification will be displayed.
You can click on it to start inspector.
Notification and inspector UI.
HTTP Inspector UI has 2 screens.
First one, shows list of HTTP calls that has been intercepted by Alice.
Each list item contains basic information about HTTP call: method, server, endpoint, time of request, duration, amount of bytes send and received, status code.
While your application waits for response, there will be progress indicator shown.
Now, if you want to see more details about some HTTP call, click on it.
It will navigate you to details screen.
HTTP call details screen.
Details screen consists of 4 tabs:Overview tab shows general informations of HTTP call (method, server, endpoint, request time, response time, duration, amount of bytes sent/received, client, connection security)Request tab shows details of HTTP request (time, amount of bytes sent, content type, request body and headers)Response tabs shows details of HTTP response (time, amount of bytes received, status code, response body and headers)Error tab shows information about error if any occurred (warning: this tab will show errors only when you’re using Dio plugin)When you want to clear all of HTTP calls that was recorded, you can click on trash icon on toolbar.
What if you don’t want to show notification when new request is being intercepted by Alice?.You can turn it off when you’re instantiating Alice (see installation above).
But if you’re disabling notification, you need to access somehow inspector UI.
In that case you can use this method to open inspector:alice.
showInspector();SummaryAlice is a new plugin which helps debugging HTTP calls in your Flutter application.
It works best with Dio plugin, but you can use it with other clients too.
Alice offers inspector UI, which will show you details of your HTTP calls.
If you found bug, or want to share your awesome idea, feel free to open issue here:jhomlala/aliceHTTP Inspector for Flutter.
Contribute to jhomlala/alice development by creating an account on GitHub.
github.
comI’m always welcome for any contribution, so you can add your awesome idea with PR.
Thanks for reading.
P.
S.
Thanks Alice for your awesomeness :).