mobx-react-devtools icon indicating copy to clipboard operation
mobx-react-devtools copied to clipboard

Chrome extension

Open ncammarata opened this issue 7 years ago • 7 comments

Hi there - not sure if this is the right place for a feature request, but I think it would be great if this were a Chrome extension instead of / as well as a React component. Thoughts?

ncammarata avatar Jul 24 '16 20:07 ncammarata

I second this request. The Chrome extension for redux is great, and it allows me to isolate the tools in a separate window which is very useful for screen space management.

EDIT: Another reason this helps is for isolating the devtools from the build, so we don't have to do any checks to exclude them from production vs development

lostpebble avatar Aug 08 '16 10:08 lostpebble

I'm planning to give this a try a bit later. If anybody else wants to help with this, pr is welcome.

@ncammarata, @lostpebble, @mweststrate what kind of extension, you think, will fit mobx?

  • The one with own devtools panel (like react devtools) that shows logs and dependencies?
  • The button right to adress bar that opens menu containing 3 checkboxes: «Show updates», «Enable logging», «Explore dependencies»?

The second one is easier to implement…

andykog avatar Aug 08 '16 11:08 andykog

I prefer the option to "open in separate panel" much like the Redux tools so as to resize / move it around where I like. The first option sounds pretty much the same as it is now, but just with the buttons built into the browser instead of on the page, so I don't see it as much of a value add to warrant the extra work.

I've never tried working with Chrome extensions before, but it could be a fun challenge. I might take a dive into the Redux extension and see if it's within my abilities at the moment and help out where I can. Link for anyone who's keen too

EDIT: Also, just putting it out there because I know it's perhaps a lot and these things of course take time (and I'm very grateful for the time you've put in), a kind of graph tree with nodes of different stores and their state would be a great addition for visualising state (and if possible even state that is not currently being observed- perhaps with an indication of that- though I'm not completely clued on MobX yet and not sure if that's even possible). Again, the redux devtools have done this rather well. And in relation to the original request, that's why a separate window works well because it tends to take up a lot of room.

lostpebble avatar Aug 08 '16 15:08 lostpebble

@andykog @lostpebble I think separate panels indeed offer the most added value. Although the buttons alone already have significant value in themselves: be able to turn the devtools on in a production environment for example, detect MobX presence on any page. To start small, I personally would go for that option first and then expand :)

mweststrate avatar Aug 11 '16 20:08 mweststrate

@mweststrate agreed. That would already be a great addition, as for now I need to separate the DevTools component out of my production builds and I don't like having to create separate entry points for my app. This would be a good place to start.

lostpebble avatar Aug 11 '16 22:08 lostpebble

@mweststrate, @ncammarata, @lostpebble, @fusepilot, @RobVermeer, @gabrielbull, @exwar, @evisong, @leader22, @ksmithut, @CNBorn, check this out, need your feedback

andykog avatar Jan 02 '17 19:01 andykog

#50

andykog avatar Jan 02 '17 19:01 andykog