Skip to content

Enable offline support for all DevTools screens #4470

Description

@kenzieschmoll

Enabling offline support will:

  1. Be helpful for users who want to export data and reload later or to send to other developers for debugging
  2. Be especially helpful for faking test data while developing DevTools. Then we can just write SomeScreenData.parse(someOfflineData) to initialize fake testing data for the screen. If we continue to integrate with Stager, this will be useful for both testing and stager development (see https://github.com/flutter/devtools/pull/446)
  3. Be helpful for users to be able to include in bug reports

Activity

  1. CoderDake commented on Sep 14, 2022

    @CoderDake
    Contributor

    It was mentioned that the Logging page might be a good place to start.

  2. CoderDake commented on Sep 19, 2022

    @CoderDake
    Contributor

    Network page may also be a good 2nd candidate

  3. CoderDake commented on Sep 19, 2022

    @CoderDake
    Contributor

    For the Network Page, consider making sure that we use HAR file format for network requests

  4. kenzieschmoll commented on Sep 19, 2022

    @kenzieschmoll
    MemberAuthor

    Exporting as HAR already exists for the network page, but for the full export of the network page, we'll also need to include extra devtools-specific information (things like selected request, filters, etc.).

  5. polina-c commented on Jan 27, 2023

    @polina-c
    Contributor

    Related issue: #4645

  6. hrajwade96 commented on Aug 4, 2024

    @hrajwade96
    Contributor

    @kenzieschmoll, in reference to our earlier discussion (#7970 (comment)), what is the plan for adding offline support to the network page? I am interested in contributing to this effort and would like to know how I can help.

    From what I understand - we need to wrap it with another model class OfflineNetworkData (with to and from json), which will contain all the extra data on this page. And add file extension detection (do explain what this detection is needed for).

  7. added
    P2important to work on, but not at the top of the work list.
    cost: highHigh engineering cost to implement
    devtools-cross-screenIssues that affect multiple DevTools screens, i.e. shared functionality and widgets
    on Aug 7, 2024
  8. kenzieschmoll commented on Aug 19, 2024

    @kenzieschmoll
    MemberAuthor

    To implement offline support for a screen, you can follow the instructions in the dart doc for OfflineScreenControllerMixin: https://github.com/flutter/devtools/blob/master/packages/devtools_app/lib/src/shared/offline_data.dart/#L125

    You can look at ProfilerScreenController and PerformanceController as examples.

    And add file extension detection (do explain what this detection is needed for)

    The more complicated part for the Network page is the fact that we support exporting as a .har file, whereas the offline framework for DevTools only supports importing & exporting to / from a JSON file. So in the current form of the offline framework, if network data is exported as a .har file, it will not be able to be re-imported back into DevTools. Only data exported as a JSON file through the DevTools offline framework can be re-imported back into DevTools.

    We can tweak the logic to support loading the .har file for the network page as a special case, but we can do this as a follow up task to adding the full offline support for the Network page. The logic to import data from a file is here: https://github.com/flutter/devtools/blob/master/packages/devtools_app/lib/src/shared/config_specific/import_export/import_export.dart/#L61-L98

  9. hrajwade96 commented on Aug 27, 2024

    @hrajwade96
    Contributor

    To implement offline support for a screen, you can follow the instructions in the dart doc for OfflineScreenControllerMixin: https://github.com/flutter/devtools/blob/master/packages/devtools_app/lib/src/shared/offline_data.dart/#L125

    You can look at ProfilerScreenController and PerformanceController as examples.

    And add file extension detection (do explain what this detection is needed for)

    The more complicated part for the Network page is the fact that we support exporting as a .har file, whereas the offline framework for DevTools only supports importing & exporting to / from a JSON file. So in the current form of the offline framework, if network data is exported as a .har file, it will not be able to be re-imported back into DevTools. Only data exported as a JSON file through the DevTools offline framework can be re-imported back into DevTools.

    We can tweak the logic to support loading the .har file for the network page as a special case, but we can do this as a follow up task to adding the full offline support for the Network page. The logic to import data from a file is here: https://github.com/flutter/devtools/blob/master/packages/devtools_app/lib/src/shared/config_specific/import_export/import_export.dart/#L61-L98

    Thanks for sharing the details,
    I had noticed that at present only exported 'json' format is supported for importing, I was thinking to make it accept 'har' as well. But as you mentioned, I will raise a separate PR for that change.
    I will work on adding offline support with below feature for network screen - when the app gets disconnected, view offline data and check the instructions and references shared by you.

  10. hrajwade96 commented on Feb 21, 2025

    @hrajwade96
    Contributor

    @kenzieschmoll is there any on going/planned work for remaining screens where I can contribute? Also I just wanted to know, which of these is of a higher priority?

  11. kenzieschmoll commented on Feb 25, 2025

    @kenzieschmoll
    MemberAuthor

    Remaining priority:

    1. Inspector. This one is high impact and we should already have some prior art here since we fetch the tree from the Flutter framework in a JSON format already. @elliette can provide more info on the current implementation.
    2. Logging. This is likely much simpler than the Inspector.
    3. All others (we may decide that offline support is not necessary for these screens, so before starting work here, please start a discussion first.)
  12. hrajwade96 commented on Mar 16, 2025

    @hrajwade96
    Contributor

    @kenzieschmoll Thanks for outlining the priorities! I'd like to contribute once I have some bandwidth.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2important to work on, but not at the top of the work list.cost: highHigh engineering cost to implementdevtools-cross-screenIssues that affect multiple DevTools screens, i.e. shared functionality and widgets

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions