MotifJS DevTools

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

Packages can now have their own panels. A MotifJS package that registers with the core's devtools API gets a section in the sidebar, drawn from plain metadata it provides: tables, trees, logs, timelines, charts, filters, a detail view with its own pages, and commands that run in the app. Events from the package update the rows as they happen, and a package can point you at something, like a failed action, by marking its section or opening it directly. The first package to use this is @motifx-community/action-history, which records what an app did, when, how long it took and what it wrote. Also: a header button that outlines the elements each reactivity flush changed, with a count for elements updated again within a second. It is off by default and the panel remembers your choice. Fixed: the 128 px toolbar icon was a broken PNG, which made Chrome refuse to install the extension from the store. Needs @motifx/core 1.2.0-rc.24 or later for package panels; older cores still work, they just show the package's summary as a value tree. MotifJS DevTools adds a MotifJS tab to the browser's developer tools for apps built with MotifJS, the fine-grained reactive UI framework without a virtual DOM. Call app.useDevelopment(true) in your app while developing; nothing else is needed. The tab appears on pages that run a MotifJS app in development mode, and the toolbar icon turns orange on them. What you can inspect: • Home: the MotifJS and contract versions and a summary of the app. • Elements: the live component tree with search, props, fields, bindings, classes, attributes, events, services and effects. Every root of the app is listed: the page, the page layer and each window the app opens. A component that lives in a popup, a Picture-in-Picture window or an iframe carries that document's name. Select a component in any of these documents or highlight it from the tree. Large trees are read in slices and shown in a virtual list, so the page stays responsive while you look. • Reactivity: every flush with the changes that started it and the effects that ran. • Performance: JS heap and components outside the tree over time, a timeline of navigations, flushes, builds and disposals, and the slowest components, flushes and navigations. • Router: the current route with its params, recent navigations with their outcome and duration, and the route configuration as a tree. • Stores: every reactive store, signal and computed, named after the field or module that keeps it, editable in place. • Services: registered services, the scope tree with the services created in each scope, and live activity. • Logs: warnings and errors with their details, cause and stack. The extension works only inside your browser. It does not collect or send any data. Source code and the in-page version for any bundler: https://github.com/motifjs-community/motifjs-devtools