Debugging unresponsive xstate/inspect

[JackCA]

I'm trying to use xstate/inspect in a very complex app with multiple levels of actors.

When using inspect, the app initially starts up but quickly becomes unresponsive. The inspect window shows a good representation of the initial states of the machine and I'm able to navigate around the different machines/states/events but it's super slow.

My theory is that part of the issue is that I'm storing very large representations of an API in the context of multiple machines.

Is there a way to:

1. Verify what is causing this slowdown?
2. and/or serialize events/contexts that I know are very heavy in a more friendly way for the inspector? Similar to redux-dev-tools' serialize?

[davidkpiano]

This would make a good enhancement to @xstate/inspect; there would have to be multiple things, though:

• A way to serialize state (but only state.context)
• A way to serialize event (which would serialize "service.state.event" too)

I would guess that the slowdown is being caused by serialization. One thing that may help is managing communication with an inspector via a web worker, so that the app isn't blocked by serialization 🤔

[Andarist]

@JackCA could you record the performance profile that would showcase the slowdown?

[JackCA]

I've attached a profile of the iframe inspector. Not sure it will help, but the CPU is pinned throughout the profile.
x-state-inspect-profile.json.zip

I've been attempting to profile the app itself but I can't even get chrome's profiler to stop -- I can keep trying if the above doesn't help.