Enhancement: Debugging Tools

[awkay]

I've been wanting to build something for a long time that would give you a debug overlay in develop mode. It really would not be that hard to make. Basically a Fulcro app that is pre-packaged in the Fulcro resources that you can embed in your development HTML and link to your running app. All sorts of cool stuff possible. Table browser, state watches, etc.

[currentoor]

I'd like to help with this. To make sure I understand what you mean.

Table Browser
Just a pretty printed view of a particular table? Or a way to grab a particular entity in the table by id?

State Watches
What would this be? I'm not sure what you mean.

Here's some thing I might find useful. Thoughts?

Query Tree
A way to see the current root level query of your application.

[awkay]

Hey great!

So, the state atom can have watches on it. I was thinking that the debug tools could hook into that in order to know when the application changed state and update any view it has open.

In terms of a data/table browser. It could show the keys in the root node...perhaps detect tables as maps whose values are maps? Maybe just an ident input? Then yes, a pretty formatted view of content, with hyperlinked idents? I'm open to ideas.

Would the root-level query be that useful? It is often a huge unwieldy thing. I had also thought of leveraging the *instrument* functionality to augment mounted components with a click sensor that could focus dev tools on that component's query and current props.

Technically, if the debug tools have access to the fulcro app, then it also has access to the reconciler and indexer, meaning that it can find any component on the screen by ident, property, or defui class. So it would be possible to find the components on screen for a given table entry and "overlay" an info pane of some sort showing the query of that component, the props it received, and the props that are actually in the database.

I was also thinking that we don't have to package anything in resources...when you're in dev mode we can just have ppl declare something in their dev user namespace and hook it to their app. We could also auto-insert a node in the page's DOM so they wouldn't have to do anything to their HTML.

[wilkerlucio]

I've been doing some work around this as well, not ready to share yet (but will this week). The idea was to start with something like re-trace (https://github.com/Day8/re-frame-trace). The initial focus was to have a database explorer, with watch capabilities, triggered by a keyboard shortcut that floats on screen, like this:

The selector on the bottom allows for switching apps, so you can track different apps same time (useful for devcards, or if you have more than one mounted fulcro app in general).

For the next tabs:

• Element - the idea is to have something like an element picker, like the one chrome does, that will display information about the element like Query, current props...
• Network - I'm working on this now, a network history with requests/responses
• Transactions - The TX log for the application, can be handled by hooking on reconciler tx-log
• OgE - Integrate OgE (https://wilkerlucio.github.io/oge/) to try out queries from the inspector.

I'm sorry I did kind run over on this one, I'm just needing it quickly. Help will be appreciated, I should be releasing this code soon. Thanks.

[wilkerlucio]

History can also be integrated into the DB tab, I have a vague idea for a UI that you could use to navigate to past versions, the watches and expanded the state of the DB can be kept during state changes (as they are already).

[awkay]

@wilkerlucio Be sure to look at the new history.cljc...there are specs about what is in it. The tx history is already there, as are the return merge's from the server interations. Oh, and timestamps, and a db-before/db-after which would be useful for showing diffs.

[wilkerlucio]

@awkay sure, it will probably have more than one version, I need this for the current Fulcro, but will be nice to read from an integrated place. That said, the integration layer is pretty thin, shouldn't be hard to switch the integration points.

[awkay]

I'm adding a way to register tools with Fulcro in a global sense so that apps start they can inform tools. I also want to expand the information that can be given to merge to include data about why the merge was done (e.g. network response).

[currentoor]

@wilkerlucio no need to apologize 😄. I just started and you're much farther along.

After pushing up your code, I can see if there's something for me to do on this. Otherwise, I'm sure there's other stuff I can work on in Fulcro.

Cheers

[awkay]

since this is now on clojars, I'm going to let the issues in fulcro-inspect server the purpose for further development.