Skip to content
HTTP Inspector for Flutter
Dart Kotlin Ruby Other
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android - Added Chopper support Dec 22, 2019
example - Added Chopper support Dec 22, 2019
ios remove reference to deleted swift file Jul 21, 2019
lib - Reverted SelectableText Jan 26, 2020
media Dark theme implementation Oct 30, 2019
.gitignore Project init Mar 3, 2019
.metadata Project init Mar 3, 2019
CHANGELOG.md - Added Chopper support Dec 22, 2019
LICENSE Update LICENSE Mar 7, 2019
README.md - Added Chopper support Dec 22, 2019
alice.iml Project init Mar 3, 2019
pubspec.lock - Added Chopper support Dec 22, 2019
pubspec.yaml - Added Chopper support Dec 22, 2019

README.md

Alice

pub package pub package pub package

Alice is an HTTP Inspector tool for Flutter which helps debugging http requests. It catches and stores http requests and responses, which can be viewed via simple UI. It is inspired from Chuck ( https://github.com/jgilfelt/chuck ).

Suported Dart http client plugins:

  • Dio
  • HttpClient from dart:io package
  • Http from http/http package
  • Chopper

Features:
✔️ Detailed logs for each HTTP calls (HTTP Request, HTTP Response)
✔️ Inspector UI for viewing HTTP calls
✔️ Save HTTP calls to file
✔️ Statistics
✔️ Notification on HTTP call
✔️ Support for top used HTTP clients in Dart
✔️ Error handling
✔️ Shake to open inspector

Install

  1. Add this to your pubspec.yaml file:
dependencies:
  alice: ^0.0.21
  1. Install it
$ flutter packages get
  1. Import it
import 'package:alice/alice.dart';

Usage

Alice configuration

Create Alice instance:

Alice alice = Alice(showNotification: true);

Alice default behaviour is to show notification with http requests. You can disable it in Alice constructor.

Add navigator key to your application:

MaterialApp( navigatorKey: alice.getNavigatorKey(), home: ...)

You need to add this navigator key in order to show inspector UI. You can use also your navigator key in Alice:

Alice alice = Alice(showNotification: true, navigatorKey: yourNavigatorKeyHere);

You can set showInspectorOnShake in Alice constructor to open inspector by shaking your device (default disabled):

Alice alice = Alice(showNotification: true, showInspectorOnShake: true, navigatorKey: yourNavigatorKeyHere);

If you want to use dark mode just add darkTheme flag:

Alice alice = Alice(..., darkTheme: true);

HTTP Client configuration

If you're using Dio, you just need to add interceptor.

Dio dio = Dio();
dio.interceptors.add(alice.getDioInterceptor());

If you're using HttpClient from dart:io package:

httpClient
	.getUrl(Uri.parse("https://jsonplaceholder.typicode.com/posts"))
	.then((request) async {
		alice.onHttpClientRequest(request);
		var httpResponse = await request.close();
		var responseBody = await httpResponse.transform(utf8.decoder).join();
		alice.onHttpClientResponse(httpResponse, request, body: responseBody);
 });

If you're using http from http/http package:

http.get('https://jsonplaceholder.typicode.com/posts').then((response) {
    alice.onHttpResponse(response);
});

If you're using Chopper. you need to add interceptor:

chopper = ChopperClient(
    interceptors: alice.getChopperInterceptor(),
);

To show inspector manually:

alice.showInspector();

Saving calls

Alice supports saving logs to your mobile device storage. In order to make save feature works, you need to add in your Android application manifest:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Example

See complete example here: https://github.com/jhomlala/alice/blob/master/example/lib/main.dart

You can’t perform that action at this time.