MotifJS DevTools

Inspect MotifJS apps: components, reactivity, performance, router, stores, services and logs.

MotifJS DevTools adds a MotifJS tab to your browser's developer tools, so you can see what your MotifJS app is doing while you build it. Getting started takes one line: call app.useDevelopment(true) in your app while you develop. On those pages the toolbar icon turns orange and the MotifJS tab shows up in DevTools. What you get: • Home: the MotifJS version and a quick summary of your app: components, routes, stores, services and issues. • Elements: the live component tree. Search it, pick a component on the page, and look at its props, fields, bindings, classes, attributes, events, hooks and services. You can add a class or hide and show a component right from the panel. • Reactivity: every flush, what started it and which effects ran. • Performance: JS heap and component counts over time, with a warning when the number of components outside the tree keeps growing. A timeline of navigations, flushes, builds and disposals, and a list of the slowest ones. • Router: the current route and its params, recent navigations with their outcome and duration, and your route configuration as a tree. • Stores: your reactive stores, signals and computeds, named after the field or module that holds them. Values can be edited in place. • Services: registered services, the scope tree, and which instances were created or disposed. • Logs: warnings and errors with their cause and stack. Everything stays in your browser. The extension doesn't collect or send any data. Rather have the panel inside the page? The same tools come as an npm package: @motifx-community/devtools. Source code and issues: https://github.com/motifjs-community/motifjs-devtools