English
See more
A powerful devtool for XState state machines
Latest Version
Version
1.7.2
Update
October 21, 2023
Size
224KiB
Developer
Category
Users
428 
Rating
4 ★
Manifest Version
3
Web Store Status
Extension ID
Languages Support
Permissions
Storage
See more
XState Ninja Extension
XState Ninja is a devtool panel for tracking state machines implemented with the XState library. It provides a better developer experience than the widely used Redux devtools extension for monitoring state machines. XState Ninja is more ergonomic and removes common pain points experienced with Redux devtools:
👉 more than one machine can be tracked at once in multiple swimlanes
👉 machine state is clearly visible (including parallel states)
👉 no events are missed regardless of when the devtool was opened
👉 side effects (invoked services and actions) are clearly visible
👉 all invoked or spawned actors are monitored, including invoked/spawned callbacks and promises
👉 dead actors are clearly marked (💀) so there is no confusion if multiple machines of the same ID are started
Read more
👉 more than one machine can be tracked at once in multiple swimlanes
👉 machine state is clearly visible (including parallel states)
👉 no events are missed regardless of when the devtool was opened
👉 side effects (invoked services and actions) are clearly visible
👉 all invoked or spawned actors are monitored, including invoked/spawned callbacks and promises
👉 dead actors are clearly marked (💀) so there is no confusion if multiple machines of the same ID are started
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "name": "XState Ninja", "author": "Richard Laffers", "description": "A powerful devtool for XState state machines", "version": "1.7.2", "manifest_version": 3, "homepage_url": "https://github.com/rlaffers/xstate-ninja", "background": { "service_worker": "background/background.js", "type": "module" }, "devtools_page": "devtools/devtools.html", "permissions": [ "storage" ], "icons": { "16": "assets/icon_16x16.png", "32": "assets/icon_32x32.png", "48": "assets/icon_48x48.png", "128": "assets/icon_128x128.png" }, "web_accessible_resources": [ { "resources": [ "inject/xstate_ninja.js" ], "matches": [ "" ] } ], "content_scripts": [ { "matches": [ "" ], "exclude_globs": [ "https://www.google*" ], "js": [ "inject/content_script.js" ], "run_at": "document_start", "all_frames": true } ]}
Read more
