Browser DevTools?

[malcolm-kee]

First of all, thanks for creating this site, it makes xstate so much enjoyable to use 😄

I was thinking of browser devtools (something like redux devtools) version of this, and planning to dive in to figure out how to do that.

Are you aware of any such effort or is it already implemented by someone?

[davidkpiano]

I'd like to start this effort soon!

[amitnovick]

Really happy to see that more people are interested in this! let's make it happen.

[coodoo]

Out of curiosity, how does this gonna work in the end as you would provision?

[amitnovick]

Out of curiosity, how does this gonna work in the end as you would provision?

Not OP, but I'm also interested in developing this, and personally my first target is UI development.

I'm thinking to re-use this devTools machine config option for instrumenting any browser extension available that we deem to be compatible (we can just hard-code the compatible ones, just like Redux DevTools is currently hard-coded).

In terms of the implementation, the XState interpreter currently checks for existence of window.__REDUX_DEVTOOLS_EXTENSION__ value and if that value exists, it connect's to the Redux DevTools interface defined on it.

I'll have to dive in a bit more sometime in order to get a more comprehensive look though.

[coodoo]

Thanks @amitnovick for the elaboration.

So you imagine while the program is running, you get to see the inner states of the statechart in the devtools, which probably also come with a nice visualization by the side?

[amitnovick]

Thanks @amitnovick for the elaboration.

So you imagine while the program is running, you get to see the inner states of the statechart in the devtools, which probably also come with a nice visualization by the side?

Yep, that functionality comes out of the box with XState-Viz.

[amitnovick]

This is coming very soon!

Here's 🎞️ sneak peek video showcasing the capabilities of the current proof of concept that I had "fun" developing during the past week (developing Chrome extensions is horrible, but this time worth it?)

[amitnovick]

I'm adding a list selection UI for letting users choose which service to visualize among all currently running ones (rather than just assuming there's just one running service like it does now).

In my mind that's a necessary feature that all of us who have used the Redux DevTools extension come to expect.

Edit:

Actually after re-thinking this, I think this feature can wait.
My first priority is making sure that the app actually works as intended.
Having a single running service displayed is fine in many common cases.

[amitnovick]

STATUS: Now available!. note: will only work with the latest XState version: npm install xstate@next

Roadmap

1. Upload my (only slightly modified) fork of XState to a repo and publish it on npm for early adopters to try out and report bugs.
2. Upload my XState DevTools extension to a new repo and making the extension available to Chrome users.
3. Merge the fork into the main XState repo (if it's good quality 👌)
4. Publish the XState DevTools extension on the Chrome Web Store (the process usually takes several working days until the extension is approved)

Feature Requests:

• a list selection UI for letting users choose which service to visualize among all currently running ones

[amitnovick]

😅 Hope you'll like to hear some update on this:

• Added a list selection UI for choosing which service to display.
• Fixed some cases like services being stopped and handling them properly.

Here's a short test I did to see that the UI is being updated correctly when a service is stopped 🎞️ Twitter video (because GitHub doesn't support videos)

[amitnovick]

Made some progress on it, and wanted to share the state of the latest snapshot:

• Added a header to the top with the "screen selection" drop-down
• Added the "States" tab to the side-panel

Very useful at this point! next thing I'm going to add is the "Events" tab to the side-panel 🌟

[amitnovick]

Today's progress:

• Added the "Events" tab to the side-panel
• Implemented a new trigger: refresh of page now triggers refresh of DevTools (as expected)

Really happy with it at this point! almost at feature-parity with the existing Redux DevTools alternative: the only feature not present is the diff of state of every event that has been processed.

[adam-cyclones]

@amitnovick, is there anywhere I can get hold of a code? I'm happy to use it in this 'state' pun intended. Looking good.

[amitnovick]

@amitnovick, is there anywhere I can get hold of a code? I'm happy to use it in this 'state' pun intended. Looking good.

Glad to see more people are excited about this as I am! 😀

The code's on my repo here.

By the way, I haven't really announced it yet, but I actually published the extension in the past few days and it is now available on the Chrome Web Store 🎉 (should probably be announced together with the rest of the changes for xstate@4.7.0 @davidkpiano).

Use the latest xstate@next version in your app to get it to work, since it relies on a recent PR.

Quick Demonstration

If you wanna play around with it as easily as possible, I would suggest:

1. Install the XState DevTools Chrome extension
2. Open up this Calculator CodeSandbox here which already uses xstate@next
3. Make sure to click Open in New Window [1]
4. Open up the DevTools and pick the XState DevTools panel
5. Let me know how it goes! 👍

[1] - CodeSandbox seems to be doing something strange that glitches it, will look into this later