FlutterArtist Debug Network Inspector

Debug Network Inspector
Features of Network Inspector

FlutterArtist Log Viewer

1. Debug Network Inspector

FlutterArtist uses the flutter_artist_dio library package as a tool to exchange information between the Flutter application and the backend. Essentially, flutter_artist_dio is just a wrapper for the DIO library package; it uses DIO to send and receive data, and logs errors if any occur. Additionally, flutter_artist_dio provides a visual Debug Network Inspector tool to review that log and perform advanced analysis.

On the FlutterArtist DEMO app, you can find the activation button for the Debug Network Inspector in the top-right corner after logging in as a system user.

ILoggedInUser

interface class ILoggedInUser { 

  bool get isSystemUser {
    throw UnimplementedError();
  }
  ...
}

No ADS

If you're writing an application based on the FlutterArtist platform, using code to display the Debug Network Inspector is very simple:

ILoggedInUser? loggedInUser = FlutterArtist.loggedInUser;
bool isSystemUser = loggedInUser?.isSystemUser ?? false;

if(isSystemUser) {
  FlutterArtist.showDebugNetworkInspector(context);
}

Note that since FlutterArtist DIO is designed independently, don't forget to integrate it with FlutterArtist in your AppConfig.
FlutterArtist AppConfiguration

If you are using flutter_artist_dio in a standalone project, unrelated to the flutter_artist package, you can open the Debug Network Inspector using the code below:

await DebugNetworkInspectorDialog.show(
  context,
  showJson: true,
  showToken: true,
);

2. Features of Network Inspector

Debug Network Inspector organizes data in an intuitive list, allowing you to select and "dissect" each request via a Tab system:

Request Headers

Manage all identification and outgoing configurations.

Request Parameters

Quickly view the request's Query Parameters.

Request Body

Display the exact raw data or JSON sent to the Server

Response Headers:

Provides key metrics like Response Time, Status Code, and error details.

Response Body:

Display response data in Tree View or Plain Text format

Advanced Filtering

The system provides multi-condition filtering, allowing you to filter by method (GET, POST,...) or focus solely on failed requests (Errors Only).

Split Mode & Sync Mode

This unique feature helps you compare two log records simultaneously on one screen:

Split Mode: Split the screen left-right to put two requests on the "scale".
Sync Mode: When activated, two windows are locked together to cross-check the Request - Response of the same log ID.

No ADS

FlutterArtist Debug Network Inspector

1. Debug Network Inspector

2. Features of Network Inspector

FlutterArtist

FlutterArtist

Newest Articles