Development Utilities

The following APIs might come in handy if you want to build cool tools on top of MobX or if you want to inspect the internal state of MobX.

`"mobx-react-devtools"` package

The mobx-react-devtools is a powerful package that helps you to investigate the performance and dependencies of your react components. Also has a powerful logger utility based on spy.

`spy`

spy(listener)

Registers a global spy listener that listens to all events that happen in MobX. It is similar to attaching an observe listener to all observables at once, but also notifies about running (trans/re)actions and computations.

spy((event) => {
    if (event.type === 'action') {
        console.log(`${event.name} with args: ${event.arguments}`)
    }
})

Spy listeners always receives one object, which usually has at least a type field. The following events are emitted by default by spy.

Event	Fields	Nested
action	name, target (scope), fn (source function of the action)	Yes
transaction	name, target (scope)	Yes
scheduled-reaction	object (Reaction instance)	No
reation	object (Reaction instance), fn (source of the reaction)	Yes
compute	object (ComputedValue instance), target (scope), fn (source)	No
error	message	No
update (array)	object (the array), index, newValue, oldValue	Yes
update (map)	object (observable map instance), name, newValue, oldValue	Yes
update (object)	object (instance), name, newValue, oldValue	Yes
splice (array)	object (the array), index, added, removed, addedCount, removedCount	Yes
add (map)	object, name, newValue	Yes
add (object)	object, name, newValue	Yes
delete (map)	object, name, oldValue	Yes
create (boxed observable)	object (ObservableValue instance), new value	Yes

Note:

There are events with the signature { spyReportEnd: true, time? }. These events might not have a type field, but they are part of an earlier fired event that had spyReportStart: true. This event indicates the end of an event and this way groups of events with sub-events are created. This event might report the total execution time as well.

The spy events for observable values are identical to the events passed to observe. It is possible to emit your own spy events as well.

`whyRun`

whyRun()
whyRun(Reaction object / ComputedValue object / disposer function)
whyRun(object, "computed property name")

whyRun is a small utility that can be used inside computed value or reaction (autorun, reaction, or the render method of an observer React component) and prints why the derivation is currently running, and under which circumstances it will run again. This should help to get a deeper understanding when and why MobX runs stuff, and prevent some beginner mistakes.

`extras.getAtom`

getAtom(thing, property?)

Returns the backing Atom of a given observable object, property, reaction, etc.

`extras.getDebugName`

getDebugName(thing, property?)

Returns a (generated) friendly debug name of an observable object, property, reaction, etc.

`extras.getDependencyTree`

getDependencyTree(thing, property?)

Returns a tree structure with all observables the given reaction / computation currently depends upon.

`extras.getObserverTree`

getObserverTree(thing, property?)

Returns a tree structure with all reactions / computations that are observing the given observable.

`extras.isSpyEnabled`

isSpyEnabled()

Returns true if at least one spy is active.

`extras.spyReport`

spyReport({ type: "your type", "details" data })

Emit your own custom spy event.

`extras.spyReportStart`

spyReportStart({ type: "your type", details: data })

Emit your own custom spy event. Will start a new nested spy event group which should be closed using spyReportEnd().

`extras.spyReportEnd`

spyReportEnd()

Ends the current spy group that was started with extras.spyReportStart.

`"mobx-react"` development hooks

The mobx-react package exposes the following additional APIs that are used by the mobx-react-devtools:

trackComponents(): enables the tracking of observer based React components
renderReporter.on(callback): callback will be invoked on each rendering of an observer enabled React component, with timing information, etc.
componentByNodeRegistery: ES6 WeakMap that maps from DOMNode to an observer-based React component instance.

Development Utilities