1. 前言

状态机的一大好处就是可以可视化状态，降低业务的理解成本和相互间的沟通成本。

目前 XState 官方提供的可视化工具已经做的很不错了，但用起来偏重，国内访问也比较慢。这边我再原基础上进行了优化，并增加了部分新功能，开发了 Viz-Lite 版。

2. Viz-Lite

Viz-Lite 可视化工具地址

主要有如下功能：

直接在右侧区域进行编写或粘贴 XState 状态机代码，右侧进行可视化。
可以在左侧可视化区域通过点击进行状态机执行。
可以在右侧事件面板中查看事件历史，且可以手动进行自定义事件发送。
可以通过 @xstate/inspect 与页面中的状态机实时建立连接，可视化查看当前页面状态机细节。
可以将可视化出来的状态图进行图片导出。
可以切切亮/暗色。

等等。

3. Inspect 底层实现

Viz-Lite 可以实时与页面中的状态图建立数据连接，需要依赖 @xstate/inspect，且在页面、Inspect、Viz-Lite 建立有严格的依赖关系。

我大致梳理了一下三者的关系，如下的序列图所示：

Viz

Inspect

Interpreter

开启 Inspect 并打开 Viz 工具

全局注入 __xstate__

打开 Viz

Inspect.createWindowReceiver()

send('xstate.inspecting')

打开状态机服务并与注册到 Inspect

__REDUX_DEVTOOLS_EXTENSION__

registerService(this)

send('service.registe')

send('service.registe', {sessionId})

三者建立连接

alt

[has __xstate__]

Viz

Inspect

Interpreter

类似于 HTTP 三次握手。

在 Viz-Lite 中建立连接主要依靠 @xstate/inspect 的 createWindowReceiver 方法。

Viz-Lite 向页面状态机发送事件，可以使用 createWindowReceiver 返回值中的 send 方法，消息体中 type 必须是 xstate.event。

页面中状态机的变化，可以通过 createWindowReceiver 返回值中的 subscribe 方法进行订阅，包括 service.state 和 service.event。监听 service.stop 可以确定连接的断开。

4. 接入调试方法

安装 @xstate/inspect：

npm i -S @xstate/inspect

从上面的序列图中也可以看出，inspect 必须在 interpret() 之前执行，不然无法连接：

import { inspect } from '@xstate/inspect';inspect({url: 'https://apis.leping.fun/viz?inspect',iframe: false
});

url 中指定 Viz-Lite 的地址 https://apis.leping.fun/viz?inspect。
iframe 指定在哪里挂载 Viz-Lite。可以直接指定一个 DOM，也可以设置为 false，浏览器会打开一个新页面。

注意：调试模式，必须在 Viz-Lite 的地址中加上 ?inspect。如果想默认关闭右侧面板可以加上 ?inspect&panel=false。

然后在创建状态机服务时，指定 devTools 标志位就可以了：

import { interpret } from 'xstate';const service = interpret(someMachine, { devTools: true });

可以访问这个地址查看效果：

Github 代码地址

5. 快捷键

+ / - 或者 CMD + 滚轮上/下：缩放。
CMD + Enter: 可视化当前代码。
↑↓←→：平移视图。同时按住 Shift，增大平移服毒。
Shift + 1：适配到到窗口大小。

6. 配合 Redux DevTools 使用

从序列图中可以看到在开启 devTools: true 的时候，会判断是否有 __REDUX_DEVTOOLS_EXTENSION__，如果有的话也可以在 Redux DevTools 中查看事件信息，如下图所示：

⭐ 原文地址

XState Viz 可视化和调试状态机相关推荐

Uber最新开源Manifold，助力机器学习开发者的可视化与调试需求
所有参与投票的 CSDN 用户都参加抽奖活动群内公布奖项,还有更多福利赠送作者 | Lezhi Li 译者 | 凯隐编辑 | Jane 出品 | AI科技大本营(ID:rgznai100) [导 ...
SpringBoot整合knife4j(swagger)实现前后端分离可视化接口调试与接口测试
目录 1.为什么使用Knife4j 2.基本使用 2.1 pom 2.2 配置Knife4j分组 2.3 拦截器放行 2.4 实体类 2.5 SpringBoot整合基础使用 2.5.1 基础配置 2 ...
可视化的状态机(FSM)
状态机这个概念已经在网上的博客和论坛中都已经说烂了,随便一搜都有一大堆.相关的废话就不多说了,在这里主要是分享一下如何可视化的设计状态机,如何增强项目的灵活性.这里通过一个生活中的电梯来了解一下状态机 ...
[伊利丹·怒风] Unity3D 绘制矩形（DrawRect）及可视化调试
背景由于要做Native2D的A* 算法寻路,所以必须进行Scene的网格划分,而进行了网格划分需要进行可视化的调试,需求就是这个逻辑.具体是实现如下效果,这里绿色的区域就是角色不能进入的区域(或者 ...
最强免费的Python IDE: 可视化的集成开发调试环境PyCharm
最强免费的Python IDE: 可视化的集成开发调试环境PyCharm 闲白儿工欲善其事必先利其器最强的标准 Vim Sublime Text Eclipse PyCharm 正文下载地址: ...
vs2015如何调试c语言,Visual C++ 2015 中的可视化调试工具
Visual C++ 2015 中的可视化调试工具 11/29/2015 8 分钟可看完本文内容 [原文发表时间] 2015/09/28 10:27 PM 当调试本地应用程序时,通常查看内存中具体对 ...
跨平台PHP调试器设计及使用方法——使用
经过之前六篇博文的分析和介绍,大家应该对这套调试器有个初步的认识.本文我将讲解它的使用方法.(转载请指明出于breaksoftware的csdn博客) 上图是该软件界面的布局,我们之后的讲解也将围绕着 ...
项目四可视化编程工具
学习目标了解PlayMaker可视化插件的下载和安装熟悉PlayMaker编程功能,事件.变量等要素. 掌握按钮和鼠标出发物体等交互功能项目描述通过对PlayMaker可视化插件的熟悉,知道在 ...
ROS进阶——SMACH状态机
SMACH BehaviorTree 一.简述 1.1 状态机简介有限状态机(Finite-state machine, FSM),又称有限状态自动机,简称状态机,是表示有限个状态以及在这些状态之间 ...

XState Viz 可视化和调试状态机