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.
Let’s get debugging!
To install React Devtools, visit the extension page for your browser of choice — Chrome or Firefox — and find the install button.
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:
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:
MyComponent
is a child of div
, which is a child of App
.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.
One often-overlooked feature in React Devtools is the ability to access selected elements in the JavaScript console. Notice the $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.
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up