search

flutter / devtools

Performance tools for Flutter
https://flutter.dev/docs/development/tools/devtools/
BSD 3-Clause "New" or "Revised" License
1.58k stars 326 forks source link

Provide an API to create extensions for the devtools #1632

Closed simc closed 1 year ago

simc commented 4 years ago

It would be very helpful if there was a way to create custom extensions for the devtool. For example, I'd like to write an extension to inspect the contents of the Hive DB. But I think there are many interesting extensions, the community could create.

The Stetho tool from Facebook allows something similar for the Chrome DevTools.

And the flipper tool also has a very powerful way to create extensions. It even allows creating custom UI.

britannio commented 4 years ago

Few use cases

cedvdb commented 2 years ago

The use cases are legion tbh, any kind of inspection of state is useful there. whatever state.

I would also like the possibility to have extension, but if that's not planned if there was a message bus mechanism where one could start another app that connects to that bus and display the required information with a desktop app it would be nice.

Let me rephrase this, if extensions is not planned, it would be nice to have the ability to:

Certainly this is doable today but my guess is that the process will be too involved (development wise) to not be solving 2 problems (making the extension + make a communication mechanism).

simc commented 2 years ago

It would even be helpful to allow third parties to access an active debugging session without requiring the user to find the websocket link in the logs.

My use cases:

simc commented 2 years ago

@kenzieschmoll Is there something we could help with to make this happen? Or are there alternatives? Riverpod and Provider are integrated into devtools. Can anyone submit an extension?

jacob314 commented 2 years ago

Here's a link to our in progress design on supporting Flutter DevTools Plugins. Comments appreciated! https://docs.google.com/document/d/1BWX8YQ962Vsx-EUDuDHRG7RX94fJlZSDRu299YRwasE/edit

simc commented 2 years ago

@jacob314 Wow that is incredible 😍 can't wait to build some plugins

rrousselGit commented 1 year ago

:wave: Out of curiosity, when could this be made available and is there anything we can do to help? :pray:

I'm asking because I'm honestly considering making my own plugin mechanism through a custom VScode extension which would allow folks to contribute tabs.
I was considering a VScode extension because it enables the plugin mechanism to access the full VScode API.
So plugins could provide custom commands or implement their own "open a file at a given offset".

But if we're going to have plugins in a reasonable timeframe, this project may not be worth it anymore (since an official solution would have a bigger reach)

jacob314 commented 1 year ago

@kenzieschmoll is in the process of kicking this effort back off. VSCode API integration is interesting and we have use cases like editing Flutter widget properties where that would be helpful as well. It would be great to have you collaborate on the implementation of the official solution for this.

rrousselGit commented 1 year ago

It's a bit unclear to me on what I could do to help. Do you have anything more specific?

Honestly, I wouldn't mind contributing to various aspects of the plugin mechanism. VScode API or not.

kenzieschmoll commented 1 year ago

Hi @rrousselGit. I'm going to prioritize working on this design. I will keep you posted when I have some more specific details to share. Thanks!

kenzieschmoll commented 1 year ago

The design for this feature is out for review:

  1. Flutter Developer Tooling Plugins. This doc aims to design a solution for DevTools and IDE plugins

Related:

  1. Dash Tooling Plugin Strategy. This doc aims to drive alignment on the "big hooks" for plugins across the broader flutter ecosystem. There is some overlap with the first doc, but this doc also involves some elements to drive consistency across analyzer and flutter tools plugins.
kenzieschmoll commented 1 year ago

I've been working on a prototype to provide a proof of concept for the above designs.

Screencast link: https://screencast.googleplex.com/cast/NTk2MzgyOTQ4MjYxODg4MHxiODFhYjFiOC0yNA Or watch video: DevTools Plugins Prototype.webm

This work is subject to change and needs a lot of cleanup, but early & rough prototype available with the combination of the following changes:

For testing, I am running app_that_uses_foo from here, which imports the foo_package from the same repo: https://github.com/kenzieschmoll/test_apps/tree/main/tooling_plugins, and I am connecting that app to devtools, built and served with dart devtools/tool/build_e2e.dart.

Note: for this to work properly, the app_that_uses_foo/.dart_tool/package_config.json entry for "foo_package" needs to use an absolute path, not a relative one:

    {
      "name": "foo_package",
      "rootUri": "../../foo_package", // Change to an absolute path
      "packageUri": "lib/",
      "languageVersion": "3.1"
    },
kenzieschmoll commented 1 year ago

Implementation Tracker

DevTools app [COMPLETE]

Task list - [x] Conditionally show screens when extensions are available - https://github.com/flutter/devtools/pull/6048 - [x] Implement extension screen framework in DevTools with embedded iFrame - https://github.com/flutter/devtools/pull/6054 - https://github.com/flutter/devtools/pull/6060 - https://github.com/flutter/devtools/pull/6097 - [more to come] - [x] Implement extension detection through DevTools server - https://github.com/flutter/devtools/pull/6094 - [x] Implement extension activation through DevTools server - https://github.com/flutter/devtools/pull/6111 - https://github.com/flutter/devtools/pull/6138 - https://github.com/flutter/devtools/pull/6140 - [x] Add an end to end integration test that loads an extension from a test app, activates / deactivates, and messages back and forth - https://github.com/flutter/devtools/pull/6373 - [x] Polish experience https://github.com/flutter/devtools/issues/6272 - [x] Enable experiment flag - https://github.com/flutter/devtools/pull/6384 - [x] Add an opt-in setting for default tab visibility behavior: https://github.com/flutter/devtools/issues/6376 - https://github.com/flutter/devtools/pull/6383

package:devtools_extensions [COMPLETE]

Task list - [x] create package - https://github.com/flutter/devtools/pull/6055 - [x] create the shared api that both DevTools and DevTools extensions will use - `ping` / `pong` (these should only be used by DevTools and the DevTools extension template) - `vmServiceConnection`: request the connect vm service uri from DevTools - `showNotification`: the extension requests that DevTools show a toast notification https://github.com/flutter/devtools/pull/6276 - `showWarning` / `showError`: the extension requests that DevTools shows a banner message https://github.com/flutter/devtools/pull/6276 - [x] create a template that extension authors will use to create devtools extensions - https://github.com/flutter/devtools/pull/6066 - [x] establish vm service connection in DevToolsExtension wrapper - https://github.com/flutter/devtools/pull/6175 - [x] add `example` to package_devtools_extensions - https://github.com/flutter/devtools/pull/6069 - [x] add an end to end example starting from package:foo instead of only showing an example of using package:devtools_extensions - https://github.com/flutter/devtools/pull/6299 - [x] ship a command that users can run to build their extension and copy to the parent package directory. This command should accept parameters for the extension app location and the parent package location - https://github.com/flutter/devtools/pull/6259 - https://github.com/flutter/devtools/pull/6298 - [x] create a simulated devtools environment that extensions can run in for easy extension development: - https://github.com/flutter/devtools/pull/6250 - https://github.com/flutter/devtools/pull/6251

package:devtools_app_shared [COMPLETE]

Task list - [x] create a new package to hold shared ui and service management components that extensions can use: https://github.com/flutter/devtools/issues/6208

package:extension_discovery [COMPLETE]

Task list - [x] develop a package to detect available extensions based on the `.dart_tool/package_config.json` file for an app @jonasfj - https://github.com/dart-lang/tools/pull/129 - [x] add package:extension_discovery as a DEP in the Dart SDK (https://github.com/dart-lang/sdk/wiki/Adding-and-Updating-Dependencies) - https://dart-review.googlesource.com/c/sdk/+/317804 - [x] roll package:extension_discovery into g3.

package:devtools_server [COMPLETE]

Task list - [x] use the extension detection package in devtools_server to find available extensions - https://github.com/flutter/devtools/pull/6139 - [x] add logic to read / write extension activation states from a `devtools_options.yaml` file - https://github.com/flutter/devtools/pull/6111 - [x] serve extension assets from the DevTools server - https://dart-review.googlesource.com/c/sdk/+/305043

Extensions land well

Task list - [x] Write the first DevTools extension and publish (package:provider?) - Tracked at https://github.com/rrousselGit/provider/issues/833 - PR: https://github.com/rrousselGit/provider/pull/832 - [x] Write documentation for extension authors - https://github.com/flutter/devtools/pull/6255 - [x] Create a Discord channel for DevTools extension authors (tracked at https://github.com/flutter/devtools/issues/6480) - [#devtools-extension-authors](https://discord.com/channels/608014603317936148/1159561514072690739) - [x] Announce to the [#package-authors](https://discord.com/channels/608014603317936148/1014208569706561567) Discord channel - [ ] Announce to the Dash ecosystem summit attendees - [ ] Write a medium article (tracked at https://github.com/flutter/devtools/issues/6479) - [ ] Create a Flutter social request to publicize extensions (tracked at https://github.com/flutter/devtools/issues/6481) - [ ] Gather early adopters to write extensions and provide feedback

open questions / edge cases to consider

  1. What if a user manually edits the devtools_options.yaml file? Maybe we should ask the analysis server to watch this file and notify DevTools on changes (by proxy of the Dart tooling daemon eventually).
  2. Should we watch the package_config.json file? Should the watch logic exist somewhere in package:extension_discovery? @jonasfj
jonasfj commented 1 year ago

Initial draft for a package:extension_discovery in https://github.com/dart-lang/tools/pull/129

rrousselGit commented 1 year ago

Cool! Tell me whenever there's something I can play with :)

kenzieschmoll commented 1 year ago

This work has landed! Anyone wanting to write a DevTools extension should follow the instructions at https://pub.dev/packages/devtools_extensions. Extension support in DevTools just landed in the Dart SDK and should be available on Flutter master by the end of the week. This will be included in the next Flutter beta and stable releases. In the meantime, you can still develop your extension using the simulated DevTools environment described in the instructions.

package:provider has already published a DevTools extension for version 6.1.0-dev.1.

We are working on setting up a Discord channel specific to DevTools extension authors, but in the meantime you can reach out on Github or on the #hackers-devtools channel on the Flutter discord.

We are eager to hear early feedback on this feature and your input on how we can improve it!