Microcosm Dev Tools
Closed this issue · 7 comments
We need developer tools. Here are my thoughts:
I really like Vue's dev tools: https://github.com/vuejs/vue-devtools. They use a tabbed interface that allows navigation of components, action history, and events (which are Vue related):
I like this structure. I also really like how the vue-devtools project handles communication with browser extensions. Generally, it's a fantastic project.
What our dev tools might look like
I could see three tabs from the start:
Tab 1: Presenter Tree
A tree visualization, similar to the components visualization in vue-devtools of the Presenter tree. Clicking one of the Presenters would expose a side panel showing the current model.
Tab 2: History
To start, this could just be a list of actions for the current branch of history. We could also explore alternative visualizations, like a tree (which we already have in microcosm-debugger. Clicking an action in the list would expose a side-panel allowing you to view the current status, payload, and any prior revisions. Long term, it would be awesome if actions themselves had a timeline that showed their progress to completion.
Tab 3: State
I want the ability to quickly navigate state, maybe using a query language like jq. State could be edited directly from this panel, pushing an action into history so that the operation could be reversible (we may need to upgrade patch or add a new method to Microcosm.
The future
In the future, I could see having a log of every thing happening, maybe as a story, like:
Repo created
Users Presenter forked repo
Users Presenter model calculated. `users` key changed
Users Presenter pushed action `getUsers`
`getUsers` completed.
Generating an export of this, maybe even as a reproducible flow, would be incredible. I could see this being tremendously valuable for someone doing QA, or a project manager doing preliminary testing when writing a ticket.
We're also doing some work with computed properties on a current project, I could see a panel where you could trace those computed properties and see how they change over time.
Vue devtools have been incredibly helpful in what I've been working on so I am 100% on board doing something similar.
I understand Tab 1 and Tab 2, but how is Tab 3 different than showing history? Wouldn't the state be represented on the right hand side of Tab 2?
I also like the idea of having a story-like representation of what is happening in the future. I think that would be great for teaching purposes and to tie to the intro Billy is designing now.
👍 I've pulled off a clone of the vue-devtools repository and am pulling out the Vue specific pieces to be replaced with what we have so far. I agree with @leobauza that Tab 2 could cover a lot of the State information, but the notion of live state editing seems to be an afterthought in comparable tools so perhaps there's something to a separate State tab.
looks like veu-devtools relies heavily on window events to pass information to/from the debugger. we imagining something similar here?
@efatsi Correct, it looks like all of these tools use window.postMessage to send data to the browser plugin. vue-devtools has some code to make serializing data between windows easier.
We probably want to figure out away to get an action by ID out of history. That way we can remote control actions. Beyond that, I think we'd be okay just sending a serialized version of history over the wire to visualize.
@nhunzaker thinking this would require updates to the base project for a debugger to be able to hook into?
I think it will. For example, Vue references a global in development mode:
https://github.com/vuejs/vue/blob/9478fde8c92d225661dcb4c949d0035284600fff/src/core/util/env.js#L52
This is the event emitter that mediates between the current page and the extension.
Closing this in favor of moving discussion over to https://github.com/vigetlabs/microcosm-devtools. Nice work on bootstrapping that Nate.