Skip to content

Stately Inspector

Stately Inspector 是一个允许您直观地检查应用程序状态的工具。它主要适用于使用 XState 的前端应用程序，但也可以与后端代码和使用任何状态管理解决方案的代码一起使用。

安装 Stately Inspector​

要使用 Stately Inspector 检查应用程序，请从 npm 安装 Stately Inspect via @statelyai/inspect:

npm install @statelyai/inspect

然后将相关的 inspector 创建器导入到您的应用程序中。创建器用于创建一个 inspector（例如，浏览器或 WebSocket inspector），您可以使用它来连接到 XState actors 和/或手动发送检查事件到 Stately Inspector：

import { createActor } from 'xstate';
import { createBrowserInspector } from '@statelyai/inspect';
import { machine } from './machine';

const { inspect } = createBrowserInspector();

// ...

const actor = createActor(machine, {
  inspect,
  // ... other actor options
});

actor.start();

当您运行应用程序时，将会打开一个包含 Inspector 的新标签页或弹出窗口。

Inspector 选项​

您可以将以下选项传递给浏览器 inspector：

  • filter - 一个函数，接受一个检查事件并返回 true，如果该事件应发送到 Stately Inspector。
  • serialize - 一个函数，接受一个检查事件并允许您在发送到 Stately Inspector 之前对其进行序列化。
  • autoStart - 是否自动启动 inspector。默认为 true。
    • 如果 autoStart: false，您可以通过调用 inspector.start() 来启动 inspector。
  • url - 要打开的 Stately Inspector 的 URL。默认为 https://stately.ai/inspector。
  • iframe - 用于 inspector 的 <iframe> 元素。默认为 null。

示例用法:

import { createBrowserInspector } from '@statelyai/inspect';

const inspector = createBrowserInspector({
  filter: (inspEvent) => {
    if (inspEvent.type === '@xstate.event') {
      // 跳过鼠标拖动事件
      return inspEvent.event.type !== 'mouse.drag';
    }
    return true;
  },
  iframe: document.getElementById('inspector-iframe')
})

发送检查事件​

@statelyai/inspect 包将会发送检查事件到连接的 Stately Inspector。目前有三种类型的事件会被发送：

  • Actor 创建事件
  • Actor 之间的通信事件
  • Actor 快照变化

当您在 XState 的 createActor(machine, options) 函数中传递 inspect 选项时，它将自动发送所有这些检查事件。

对于其他状态管理解决方案，您可以使用以下方法手动发送检查事件：

  • inspector.actor(actor, snapshot, info) - 发送 actor 创建事件
  • inspector.event(actor, event, info) - 发送 actor 之间的通信事件
  • inspector.snapshot(actor, snapshot, info) - 发送 actor 快照变化
import { createBrowserInspector } from '@statelyai/inspect';

const inspector = createBrowserInspector();

// 想象一个待办事项应用...
inspector.actor('todos');

// 当创建一个待办事项时
inspector.actor('todo-1', {
  context: { status: 'active' }
});

// 当用户完成一个待办事项时
inspector.event('todo-1', { type: 'todo.complete' });

// 当待办事项发生变化时
inspector.snapshot('todo-1', {
  context: { status: 'completed' }
});

// 当 todos actor（而不是用户）向待办事项发送事件时
inspector.event('todo-1', { type: 'todo.update' }, {
  source: 'todos'
});

// ... etc.

这三种类型的检查事件包含了 Stately Inspector 生成两种实时图表所需的所有信息：

  • 状态机图（如果提供了状态机定义）
  • 序列图