Dev-tools for Mobservable and React
npm install mobservable-react-devtoolsnpm install mobservable-react-devtools --save-dev
Somewhere in your application, create a DevTools component:
``jsx
import DevTools from 'mobservable-react-devtools';
class MyApp extends React.Component {
render() {
return (
Supported props:
*
hightlightTimeout — number, default: 1500.
From there on, after each rendering a reactive components logs the following three metrics:
1. Number of times the component did render so far.
2. The time spend in the
render() method of a component
3. The time spend from the start of the render()` method until the changes are flushed to the DOM.For each component the color indicates roughly how long the coloring took. Rendering times are cummalitive; they include time spend in the children.
* Green: less then 25 ms.
* Orange: less then 100 ms.
* Red: rendering for this component took more than 100ms.
* ~~Be able to turn dev-tools on and off at runtime.~~
* ~~Select and log dependency tree of components.~~
* Visualize observer tree values
* ~~Be able to enable state change tracking from the extras module~~