A Brief Guide to React Developer Tools
As a beginner React developer, we started throwing console.log functions throughout our code to check state and props within various components. If you’re like me and forget to add a string before your console.log, then it can be hard to tell what is what and end up with something looking like:
Enter React Developer Tools.
React Dev Tools
React Developer Tools is an extension available in both Chrome and Firefox. We are going to focus on Chrome here. Once the extension is installed, there will be two new tabs available (Components and Profiler) in developer tools if the website uses React. Note: React Dev Tools are under active development, meaning new features get added all the time, so this may not be accurate in the future, but as of October 2019 these are the available features.
Components
The Components tab shows you the hierarchy of all components rendered on the page, including subcomponents that they then rendered.
You can use the arrow icon in the top left to select an element on the page and see the corresponding component selected in the component hierarchy. Note: there is a similar button within the regular Chrome dev tools that selects and inspects an HTML element in the DOM.
You can also search the component hierarchy by text or regex.
You can select a component from the hierarchy and on the righthand side see and edit its props and state, and see what components it is rendered by.
Here the Welcome component is getting a user object from props and is stateless.
Here the Plant component is getting lots of props including some functions, an array of notes, a plant object, and a user object, and is managing searchTerm in state. The state shown updates in real time as the state changes on the site.
You can access components via the console in two ways. Both involve first selecting the component in the component hierarchy (like Plant above). The first is to then go to console and type $r.
The second is to click the third icon in the top right to copy the component data to the console, and then go to the console.
Profiler
The Profiler tab records performance information showing how often your app re-renders. You have to start recording and then move around your app, and then when you stop recording you will see a visualization of each re-render.
I’m not going to go into any more detail on the Profiler tab, but more information on it can be found here and here.
