Build a Dart DevTools tab for MobX

[pavanpodila]

Start by creating a PR in this repo: https://github.com/flutter/devtools

Refer to the Design Doc for the potential features.

[rrousselGit]

Oh, I'll definitely follow that one.

[rrousselGit]

Depending on what's possible, yes. But that's unrelated to Mobx.

[rrousselGit]

@pavanpodila have you tried anything or found documentation explaining how to add a custom screen on the devtool?

[pavanpodila]

I spoke to Jacob, an architect from the Flutter DevTools team, who suggested I start with the Logging screen: https://github.com/flutter/devtools/tree/master/packages/devtools/lib/src/logging.

That is an example of adding a new screen/tab to the DevTools interface

[rrousselGit]

So that means it'd be built in the dev tool?

I'm not sure that's a good idea. I don't see how that'd scale as the flutter community grows.

What about a browser extension instead? It'd detect that the page is from the devtools, and add a tab manually.

[pavanpodila]

Ya from what I learnt, there is no extensibility built in for third party. With mobx we will become the first extension 😀

[talamaska]

@pavanpodila @rrousselGit Instead of trying to link with flutter dev tools, I would suggest another approach, the one that flutter redux uses. Instead, by using redux_remote_devtools, you are able to debug the store in remote dev tools by running your own server. I would like to see the same for mobx since the js version already is kinda supporting this via mobx-remotedev. Please invest some time into this, cause now the mobx is a blackbox in flutter I'm not sure what's going on, I need to put breakpoints and debugPrints in order to see if the action is fired or what I have in the store.

[rrousselGit]

From the 4.0.0 of provider and onward, providers correctly implement the diagnostic methods needed to see the current value on the devtool

Which means if you're using provider to pass your stores (and have a proper toString), you should be able to see their content

[talamaska]

right but how to link providers to the remote dev server? Or you mean the flutter dev tools not the redux one?

[rrousselGit]

Flutter devtools, yes

[yshean]

hi there, are you guys currently working on this? is there a specific direction on what approach will be used? e.g. something like redux_remote_devtools, a tab on dart dev tool, a browser extension, or something else?

[pavanpodila]

Work has not started on this. We want to target the Flutter Dev Tools first.

[fzyzcjy]

Hi one year has passed :) Are there any updates?

[alsoLut]

any news?

[Rohithgilla12]

Hello I really want to build this tool, but don't have prior experience on building the devtools.

If the making it PR to the official flutter/devtools is a hassle, we can make it as a standalone application.

@fzyzcjy it would be very helpful if you can help with references on how to create a standalone application that would interact with the main application.

I remember it from the convenient_test_manager!

Would appreciate any help from anyone getting it started!

Thanks

[fzyzcjy]

@Rohithgilla12

how to create a standalone application that would interact with the main application

My convenient_test_manager uses grpc. the manager is a desktop app and it serves as a grpc server; the worker is the android/ios/... app and it is a grpc client connecting to that "server".

Btw, I am curious where do you find me from this issue?

[Rohithgilla12]

@fzyzcjy Thanks will check it out.

Found from https://github.com/mobxjs/mobx.dart/issues/215#issuecomment-763568015 and I also remember the convenient_test_manager its an amazing package!

[fzyzcjy]

@Rohithgilla12 Haha I see. You are welcome!