Overview

Infospect meaning Information Inspector is a Flutter plugin for that empowers the developers to debug the network calls and logs in the app. It is a powerful tools that offer network call interception and logging features, among others. By allowing developers to monitor and intercept network calls, they can efficiently debug network-related issues and optimize app performance. The logging and debugging capabilities aid in understanding app behavior and detecting errors, leading to faster bug resolution.

Preview

iOS

macOS - Opening Infospect in new Window

Linus (Ubuntu VM in mac)- Opening Infospect in new Window

Window 10 - (VM in mac) - Opening Infospect in new Window

Getting started

  1. Add the dependency to your pubspec.yaml file. (Replace latest-version with the latest version of the plugin)
dependencies:
  infospect: latest-version

or using the below command

flutter pub add infospect

Usage

  1. Adding args to main, to enable the support of multi window. Plugin used for this https://pub.dev/packages/desktop_multi_window
void main(List<String> args) {}
  1. Initialize the plugin in main.dart
  WidgetsFlutterBinding.ensureInitialized();
  Infospect.ensureInitialized();
Infospect ensureInitialized({
  int maxCallsCount = 1000,
  GlobalKey<NavigatorState>? navigatorKey,
  bool logAppLaunch = false,
  void Function(String path)? onShareAllNetworkCalls,
  void Function(String path)? onShareAllLogs,
}

In ensureInitialized we can configure the maxCallCount int for both network calls and logs, defaults to 1000. A navigatorKey GlobalKey<NavigatorState> that will be used for navigation and dialog, if not provided a new key will be created. A bool value to logAppLaunch, if true will log the app launch with details like below, defaults to true,

App name:  Example
Package: com.example.example
Version: 0.1.0
Build number: 0.1.0
Started at: 2023-08-20T13:39:56.531974

A call back to handle the share functionality for all the network calls onShareAllNetworkCalls, This will provide the path of the compressed file name infospect_network_calls_log.tar.gz, which can be shared accordingly. If not provided, the default platform share option will be invoked.

A call back to handle the share functionality for all the logs onShareAllLogs, This will provide the path of the compressed file name infospect_logs.tar.gz, which can be shared accordingly. If not provided, the default platform share option will be invoked.

  1. As in desktop a new window is used to show the infospect window, we need to add the following code in main.dart, as this will help to handle the data received to the main window from the infospect window.
  Infospect.ensureInitialized();
  Infospect.instance.handleMainWindowReceiveData();

else can be also combined with ensureInitialized

  Infospect.ensureInitialized(logAppLaunch: true).handleMainWindowReceiveData()
  1. Rather using runApp using, use Infospect.instance.run(args, myApp: EntryWidget()); This will help to set the args and use it when launching the infospect window in Desktop
  Infospect.instance.run(args, myApp: const MainApp());
  1. Adding network call interceptor a. dio:
  _dio = Dio(BaseOptions());
  _dio.interceptors.add(Infospect.instance.dioInterceptor);

b. http:

  http.Client client = http.Client();
  client = Infospect.instance.httpClientInterceptor(client: client);
  1. Adding logs
  Infospect.instance.addLog(
    InfospectLog(
      message: logMessage,
      level: level,
      error: error,
      stackTrace: stackTrace,
    ),
  );
  1. Adding invoker to get and overlay button to open the infospect window state: alwaysOpened, collapsible, autoCollapse
  InfospectInvoker(
    state: InvokerState.collapsible,
    child: child,
  );

This can be wrapped around the child widget returned from the builder method of MaterialApp. By this, the invoker will be available on all the screens of the app.

If a navigator key is provided in the ensureInitialized method, then the navigator key can be used here, if not provided a new navigator key will be created by Infospect and can be accessed using Infospect.instance.getNavigatorKey and can be used as below

  MaterialApp(
    navigatorKey: Infospect.instance.getNavigatorKey,
    theme: ThemeData(useMaterial3: true),
    darkTheme: ThemeData.dark(useMaterial3: true),
    themeMode: ThemeMode.dark,
    builder: (context, child) {
      return InfospectInvoker(
        state: InvokerState.collapsible,
        child: child ?? const SizedBox.shrink(),
      );
    },
    home: const MainApp(),
  )

In desktop the infospect window will be opened in a new window, and it can be invoked by clicking on the invoker or using the mentioned shortcut keys

macOS: ⌘ + ⌥ + i (Command + Option + i) Windows: Ctrl + Alt + i Linux: Ctrl + Alt + i

But in mobile the infospect window will be opened in a new route.

Upcoming Feature

  1. Breakpoints for network call to edit request and response.
  2. Add support for more network client.
  3. Sorting of the logs and network calls.
  4. An example app having multiple screens to show the usage of the plugin with network call and selection for respective network library to be intercepted and logger implementation.
  5. Bug fixes and many more.

Support

This plugin is free to use and currently in its early stages of development. We plan to add many more features soon. Please visit the Github Project to know about the upcoming feature and fixes. If you encounter any issues or would like additional features, please raise an issue in the GitHub repository.

Feel free to contribute to this project by creating a pull request with a clear description of your changes.

If this plugin was useful to you, helped you in any way, saved you a lot of time, or you just want to support the project, I would be very grateful if you buy me a cup of coffee. Your support helps maintain and improve this project.

Buy Me A Coffee

Libraries

features/invoker/infospect_desktop_invoker
features/invoker/infospect_invoker
features/launch/bloc/launch_bloc
features/launch/screen/infospect_launch_screen
features/launch/screen/launch_desktop_screen
features/launch/screen/launch_mobile_screen
features/logger/infospect_logger
features/logger/models/infospect_log
features/logger/ui/logs_list/bloc/logs_list_bloc
features/logger/ui/logs_list/components/log_item_widget
features/logger/ui/logs_list/components/logs_list_app_bar
features/logger/ui/logs_list/models/logs_action
features/logger/ui/logs_list/screen/desktop_logs_list_screen
features/logger/ui/logs_list/screen/logs_list_screen
features/logger/ui/logs_list/utils/log_helper
features/network/interceptors/infospect_dio_interceptor
features/network/interceptors/infospect_http_client_interceptor
features/network/models/infospect_form_data
features/network/models/infospect_network_call
features/network/models/infospect_network_error
features/network/models/infospect_network_request
features/network/models/infospect_network_response
features/network/network
features/network/ui/details/bloc/interceptor_details_bloc
features/network/ui/details/components/interceptor_details_error
features/network/ui/details/components/interceptor_details_request
features/network/ui/details/components/interceptor_details_response
features/network/ui/details/models/details_topic_data
features/network/ui/details/models/request_details_topic_helper
features/network/ui/details/models/response_details_topic_helper
features/network/ui/details/screen/desktop_details_screen
features/network/ui/details/screen/interceptor_details_screen
features/network/ui/details/utils/interceptor_details_helper
features/network/ui/details/widgets/details_row_widget
features/network/ui/list/bloc/networks_list_bloc
features/network/ui/list/components/expansion_widget
features/network/ui/list/components/network_call_app_bar
features/network/ui/list/components/network_call_item
features/network/ui/list/components/trailing_widget
features/network/ui/list/desktop_components/desktop_call_list_states
features/network/ui/list/desktop_components/draggable_cell
features/network/ui/list/desktop_components/draggable_table
features/network/ui/list/desktop_components/state_helpers
features/network/ui/list/models/network_action
features/network/ui/list/screen/desktop_networks_list_screen
features/network/ui/list/screen/networks_list_screen
features/network/ui/raw_data_viewer/bloc/raw_data_viewer_bloc
features/network/ui/raw_data_viewer/models/raw_data_view
features/network/ui/raw_data_viewer/screen/raw_data_viewer_screen
helpers/desktop_theme_cubit/desktop_theme_cubit
helpers/infospect_helper
infospect
routes/routes
styling/themes/infospect_theme
utils/common_widgets/action_widget
utils/common_widgets/app_adaptive_dialog
utils/common_widgets/app_bottom_bar
utils/common_widgets/conditional_widget
utils/common_widgets/divider
utils/common_widgets/highlight_text_widget
utils/extensions/date_time_extension
utils/extensions/double_extension
utils/extensions/infospect_log/infospect_log_extension
utils/extensions/infospect_network/network_call_extension
utils/extensions/infospect_network/network_request_extension
utils/extensions/infospect_network/network_response_extension
utils/extensions/int_extension
utils/extensions/map_extension
utils/infospect_util
utils/models/action_model