Wave browser devtools

[mturoci]

It might be a good idea to have Wave browser devtools (similar to React), that would allow you to see all your cards with their state in a neat and searchable manner.

The implementation should be relatively simple - just intercept the ws connection and show it onscreen. As small additional feature, we could add filtering so that users don't have to search through whole card tree.

cc @lo5 @geomodular for discussion.

[lo5]

+1 - would be useful for debugging.

Are you referring to a Chrome devtools extension?

I typically go to Network -> WS to observe traffic and drill through objects, but it's not all that usable, especially when you want to observe changes to specific cards or components. If we're providing a UI for this (either in-browser or via devtools), it should at least have a UX for observing specific cards - and I don't know what that would look like. Any ideas?

A UI-less way to do this could be a meta flag that dumps traffic into the console, but in a smart way (e.g. only changes/diffs).

[mturoci]

Are you referring to a Chrome devtools extension?

Chrome extension in general.

it should at least have a UX for observing specific cards - and I don't know what that would look like. Any ideas?

I imagine something like this

Screen.Recording.2021-01-19.at.10.24.31.AM.mov

However, our cards or not really hierarchical, but rather flat so instead of displaying a tree, we would have just a simple list that could be searched through and inspected. Basically what can be seen in the video above.

A UI-less way to do this could be a meta flag that dumps traffic into the console, but in a smart way (e.g. only changes/diffs).

This is also an option, but printing every change will quickly pollute the whole console. To mitigate it, we would have to use console.clear which will have unwanted side effect - it will remove also any browser errors if present which makes debugging harder actually. In addition to that, logging only changes does not easily provide big picture as opposed to UI.

I personally think having a UI is better option in terms of usability and readability.