Skip to content

Commit

Permalink
updated obsolete devtools info based on changelog (#2224)
Browse files Browse the repository at this point in the history
* updated obsolete information with newer based on changelog

* CR comments fix
  • Loading branch information
glebsts authored and FredyC committed Dec 2, 2019
1 parent 1a95aee commit 98ba15f
Showing 1 changed file with 23 additions and 5 deletions.
28 changes: 23 additions & 5 deletions website/static/getting-started.html
Expand Up @@ -393,11 +393,29 @@ <h3>Asynchronous actions</h3>

<h3>DevTools</h3>
<p>
The <a href="https://github.com/mobxjs/mobx-react-devtools" target="_blank"><code>mobx-react-devtools</code></a> package
provides the devtools that you find on the top right of this screen and which can be used in any MobX + ReactJS app.
Clicking the first button will highlight each <code>@observer</code> component that is being re-rendered.
If you click the second button and after that one of the components in the preview,
the dependency tree of that component is shown so that you can precisely inspect which pieces of data it is observing at any given moment.
Following tools can be used to analyze your mobx-react application:
</p>
<ul>
<li>
Visualizing re-rendering of components is now part of the standard
<a href="https://reactjs.org/blog/2019/08/15/new-react-devtools.html" target="_blank">React devtools</a>
</li>
<li>
The dependency tree of a component tree can be inspected by showing the state of the <code>useObserver</code>
hook in the React devtools (older versions may display it as just an <code>Object</code>)
</li>
<li>
Spying on events can still be done with the
<a href="https://github.com/mobxjs/mobx-devtools" target="_blank">browser plugin</a>
, through the <a href="https://github.com/winterbe/mobx-logger" target="_blank">mobx-logger package</a>
or manually by using the <a href="https://mobx.js.org/refguide/spy.html" target="_blank">spy</a> or
<a href="https://mobx.js.org/best/trace.html" target="_blank">trace</a> utility from the mobx package.
</li>
</ul>
<p>
The <a href="https://github.com/mobxjs/mobx-react-devtools" target="_blank"><code>mobx-react-devtools</code></a>
(either as package or browser plugin) is
<a href="https://github.com/mobxjs/mobx-react/blob/master/CHANGELOG.md#600" target="_blank">no longer supported</a>.
</p>

<h3>Conclusion</h3>
Expand Down

0 comments on commit 98ba15f

Please sign in to comment.