[Proposal] official bloc devtools

[xuanswe]

If you use Redux, Redux DevTools is a must. It would be nice if we have a similar tool for Bloc.

There's a nice guy, who is implementing flutter_bloc_devtools.

@felangel: It would be nice if this kind of tool is officially supported and be always in synced with the development of Bloc library. Maybe you could contact the author of flutter_bloc_devtools to somehow make it officially supported by you?

[felangel]

Description

This is just an update/ current state for someone that might take up this task later. On https://github.com/felangel/bloc/wiki/Roadmap, this is written as

Developer Tools . Like Redux Dev Tools but for bloc/cubit

Short Version

• A simple version would take about 2-20 hours, but not much gain over custom BlocObserver.
• A complex version may not be technically feasible, especially the Redux "time travel" feature.

Details

Works/Done

• [x] Reviewed https://github.com/andrea689/flutter_bloc_devtools, which wires up BlocObserver to emit commands to a Redux Dev Tools observer.
• [x] Updated that package for v8.0.0 of bloc. See https://github.com/chonghorizons/flutter_bloc_devtools. Very quick and dirty.
• [x] Confirmed working for a basic counter app, for flutter build web
• [x] Basic events and states reporting works. Essentially "read" mode.
• [x] Got the devtool server to work with the v8 flutter_todos tutorial (specifically, this commit/version. Didn't clean up the example.

Doesn't work

• [ ] Issues with converting the state to JSON so that it can display the state tree correctly. Namely, the state needs to support toJSON().
• [ ] Some issues with Enum's and using jsonEncode() See https://github.com/dart-lang/sdk/pull/47875/files
• [ ] Undo not implemented.
• [ ] Unsure if undo is even possible: how to send the command from the DevTool to the built instance to enable an undo. AKA "write" mode.
• [ ] Manual testing for flutter build to an apk.
• [ ] Writing unit tests for the package.

Recommendation:

• A basic "read" version of the DevTool that is robust could be done with minimal additional effort. (Maybe 2-20 hours).
• The package will display state as toString() if it can't jsonEncode().
• Not sure if there is much gain over just using a custom BlocObserver to log events and the FlutterDevtools to view the console or look at the widget tree.
• A "read+write" version that allows one to set the state (e.g. do an Undo or "time travel") on the device running would be cool. But I'm not even sure how to implement that.

originally posted in https://github.com/felangel/bloc/issues/3073 by @chonghorizons

[guenth39]

Any update on this? Maybe it's relative easy to do this nowadays, as @rrousselGit did some great work by adding a provider tab to the official DevTools, where at least the BloCs and Cubits are visible.

[fodil-a]

Current state of that tab, without tweaking anything.

Just had to add "provider" direct dependency.

[lsaudon]

There's now a package to do just that. Maybe it's easier than before? For me, just having the stack as with an bloc observer would be enough (no filter).

devtools_extensions

[felangel]

Working on this now 👍

[TomaszCz]

Hi! @felangel Would you be so kind and provide status of that?

Not sure if you know, but all the forks based on remotedev-server are not working anymore. I think I found the most recent fork of the original package, unfortunatley it still use remotedev-server. https://github.com/haudangduy-agilityio/flutter_bloc_devtools?tab=readme-ov-file#using-remotedev remotedev-server

Context: remotedev-server package was renamed to redux-devtools-cli and merged into redux-devtools monorepo so the models, interfaces etc everything changes.

I attempted calling redux-devtools --open=browser --port=8000 but despite proper connection, redux devtools being up and running, the actual events are not pushed further, something on the redux-devtools interfaces has been changed

Please give some insights how far the current issue is going :)

[zbarbuto]

BTW the built-in devtools for the Provider package (which Bloc uses under the hood) already do an okay job for debugging with Bloc.

You just need to enable showing private + inherited properties so you can see the current value of state:

https://github.com/felangel/bloc/assets/9100419/42da10b2-d039-4504-aa4a-42ed0a959459

It doesn't let you do fancy things like see state transitions or emit arbitrary values like the redux devtools do, but it's at least a start.

[lukas-pierce]

Working on this now 👍

Are there any updates?

Found something https://github.com/andrea689/flutter_bloc_devtools but it looks abandoned

[AlexanderLid]

@zbarbuto What version of provider and flutter bloc where you using? Latest is not working for me: flutter bloc: 8.1.4 provider: 6.1.2 flutter: 3.24.2

I've tried multiple other versions for, but i get "Devtools failed to connect with package:provider" everytime.

I am running flutter web.

[zbarbuto]

@AlexanderLid I tried a fresh flutter app with latest provider and can confirm it doesn't work in web (get the same error), though definitely does with mobile.

I'm not sure what the status is of devtools extensions with flutter web but the lack of hot-reload makes it a pain to develop against anyway so I suggest just developing against mobile.