In this lesson, you will learn about the React Devtools browser extension.
Debugging is a very key aspect when we do development in any programming language. Without proper toolset, we often find it difficult to identify the real reason behind any bug or issue. React comes with a very handy browser extension called React Developer Tools which allows us to seamlessly inspect the React component hierarchies, props, state, and more (we will learn about React components, props, state later on). Along with that, this extension also helps us to profile the performance of our application.
If you are using Google Chrome, then you can install it from the chrome web store.
Or, if you are using Firefox, then you can install it from the Add-Ons store.
After installing the extension, if you'd open any website which is developed in React (for example Twitter) and open the browser developer console (using the inspect option), you will be able to see two new tabs: "⚛️ Components" and "⚛️ Profiler".
The Components tab shows you the root React components that were rendered on the page.
The Profiler tab allows you to record performance information.
Now, how to use this extension to debug any React application? we will learn more about that in future lessons.