Choo: Devtools for choo

Created on 27 Nov 2016  Â·  17Comments  Â·  Source: choojs/choo

Hey, thanks for the great little framework!
I would like to take a stab at implementing a browser devtool for choo.

In the only previous suggestion for this feature ( #152 ) the suggested API would use the plugins for that:

const choo = require('choo')
const devtools = require('choo-devtools')

const app = choo()
app.use(devtools())

Does that still reflect the current thinking on the issue?

Most helpful comment

Umm, no one is forcing you to write it or use it. I also don't think that you should be discouraging people from contributing @Ryuno-Ki.

That said, I don't want this issue to turn into a debate about relative merits / drawbacks of browser devtools, so would be great if we could stick to constructive comments here.

@yoshuawuyts Thanks for pointing out @forresto's work. cycle.js has a similar devtool and it's pretty cool. I would like to take it in a similar direction.

All 17 comments

If you see the features project in this repo, there is a _choo devtools for the browser_ card, so I think it still is on the roadmap. Now, I don't know if someone has already started it or any advance on the feature.

Yeah, I saw that, but there was not a separate issue, just the project card.

I'm new to choo, so this would be more of a glorified action logger at first. There is great prior art in other fronted libraries, like mobx, redux or cycle that definitely got a bunch of things right:
https://github.com/gaearon/redux-devtools
https://github.com/mobxjs/mobx-react-devtools
https://github.com/cyclejs/cyclejs/tree/master/devtool

And of course, I welcome your suggestions!

cc/ @forresto

On Sun, Nov 27, 2016 at 11:07 PM Michal notifications@github.com wrote:

Yeah, I saw that, but there was not a separate issue, just the project
card.

I'm new to choo, so this would be more of a glorified action logger at
first. There is great prior art in other fronted libraries, like mobx,
redux or cycle that definitely got a bunch of things right:
https://github.com/gaearon/redux-devtools
https://github.com/mobxjs/mobx-react-devtools
https://github.com/cyclejs/cyclejs/tree/master/devtool

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/yoshuawuyts/choo/issues/342#issuecomment-263151201,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACWlej_FVBLIoJG_kjJuDXk96qL89Gixks5rCf8XgaJpZM4K9M_G
.

I wonder, why a devtool plugin is needed in the first place. To me it's an indicator of a framework going way too complicated …

Because debug...

There's a difference between "need" and "could be useful"; I don't think
choo is reliant on devtools to work well, but that doesn't mean they can't
have added value. The direction @forresto is taking with the project he's
been creating a visual representation of how choo's events flow between
different parts of the application, which is useful for things like
debugging and explaining the internals of a project to people recently
joining in.

On Sun, Nov 27, 2016 at 11:52 PM Yerko Palma notifications@github.com
wrote:

Because debug...

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/yoshuawuyts/choo/issues/342#issuecomment-263153808,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACWles0TMzB8WQJnGBaBiANPrOrHVJ_tks5rCgmXgaJpZM4K9M_G
.

Chrome, Firefox and Safari all ship Developer Tools with a Debugger. Why can't choo use them? I can set breakpoints, inspect variables etc. I don't understand, why this isn't sufficient.

Umm, no one is forcing you to write it or use it. I also don't think that you should be discouraging people from contributing @Ryuno-Ki.

That said, I don't want this issue to turn into a debate about relative merits / drawbacks of browser devtools, so would be great if we could stick to constructive comments here.

@yoshuawuyts Thanks for pointing out @forresto's work. cycle.js has a similar devtool and it's pretty cool. I would like to take it in a similar direction.

@michalczaplinski Cool! I'm focusing on the graph rendering and interactive parts. The missing pieces are the connection to running app and dev tool / extension.

https://github.com/forresto/choo-graph-viz

Personally I would love more insight into what's happening behind the scenes to help make debugging easier! choo-log helps, but I'm sure we could benefit from the ideas from other projects as well.

I'd be happy to help development on this, I have experience creating chrome extensions :)

@MattMcFarland Thanks Matt! :) I ll try to push some code to a repo on github this weekend.
It should be a an extension for chrome first, firefox second perhaps and not bother with safari/edge for now.

@michalczaplinski If youre interested you can join the trainyard which is a place where we are working on adding a lot of choo centric stuff. https://github.com/trainyard - would love to have you :D

@MattMcFarland hey Matt, thanks for the invite! I started hacking on choo-devtools here:
https://github.com/michalczaplinski/choo-devtools

But I also see that you have started a similar project with choo-time...? Shall we join efforts on this somehow?

Also @MattMcFarland if you have experience in testing chrome extensions, that would be great if you could share some insight - it seems somewhat complicated to set up properly if I want to mock chrome.* APIs, etc.

@michalczaplinski so choo-time was meant to not be a devtools extension, but we would love for it to be part of one.. just thinking modular at this point. And yes, I do have some experience mocking chrome apis, it just depends though :)

to be honest I think the new choo-log + https://github.com/yoshuawuyts/choo-expose are all we need. Devtools are cool, but I no longer think we need a choo specific one. Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

nanaian picture nanaian  Â·  5Comments

yoshuawuyts picture yoshuawuyts  Â·  5Comments

tornqvist picture tornqvist  Â·  4Comments

rafaismyname picture rafaismyname  Â·  6Comments

idchlife picture idchlife  Â·  5Comments