React Developer Tools (Devtools for short) is a browser extension for Chrome and Firefox that provides an extra set of React-specific inspection widgets to assist you with development. By installing React Devtools, you’ll get two main features: a view of the component tree and the current state and props of each component you select.
— Sorry to interrupt this program! 📺
Given the current situation with COVID-19, times are hard for most of us, but if you're stuck at home you can perhaps use that extra time to work on your React skills. Wes put all of his courses at 50% off to help out with the current challenge we're facing.
Plus, these are affiliate links, so if you purchase a course you help Alligator.io continue to exist at the same time! 🙏
Let’s get debugging!
The images in this tutorial are captured from Chrome, but the Firefox version has no notable differences. If you use a different browser, or perhaps need to inspect a React Native app, React Devtools is available as a standalone application. You can read more about that here.
After installation, the extension requires no further setup. If you find yourself unable to access the toolkit, try reopening your browser or verifying that Devtools can access the React instance on the page by clicking the React logo next to your address bar:
Inspecting Your App
The quickest way to open React Devtools is to right click your page and select inspect.
On your browser’s inspection window, select the React tab, and you should be presented with a view of your app’s component hierarchy:
If you’ve used Chrome or Firefox’s developer tools, this view should look a little familiar to you. The view of our app’s component tree is similar to the plain HTML tree you’d see on the
Elements tab, but there are some improvements:
- Our React elements are displayed next to plain HTML elements and are selectable.
- Selected React elements have a real-time view of the instance’s state and props (as seen on the right). This is great for debugging!
- The tabs at the bottom represent the path from the top of the tree to our selected element. In this case,
MyComponentis a child of
div, which is a child of
Inline element selection
Much like the plain-HTML element select feature in Chrome and Firefox, React Devtools has a feature to select React components on the page. Click the bullseye button, then select an element on the page:
You’ll notice we can’t select MyComponent directly, but we can get pretty close by using the selection tool.
In cases where your component tree is tall or complex, the search feature comes to the rescue.
$r next to selected elements in the component tree — this is the name of the variable we can use to access the instance:
The same thing that makes debugging React applications a struggle for some also makes it a breeze for others. In most cases, debugging reactively simply means closely inspecting your app’s state or view.
Mastering the features in React Devtools is a highly effective way to do both of these tasks at once.